الخطوات

1
تحويل أي عنصر إلى حاوية Grid

عيّن display: grid على العنصر الأب. لن يتغير شيء في المظهر بعد — ستظل العناصر الفرعية مكدّسة رأسياً، لأنك لم تُعرّف أي أعمدة بعد. هذه هي نقطة البداية.
css
```
.container {
  display: grid;
}
```
2
تعريف الأعمدة بـ grid-template-columns

هنا تُثبت Grid سمعتها. التعريف التالي ينشئ أكبر عدد ممكن من الأعمدة التي تتسع لها المساحة، بحد أدنى 260px لكل عمود، مع توزيع المساحة المتبقية بالتساوي. أضف بطاقات أو احذفها — ستُعيد الشبكة تدفقها تلقائياً، بدون أي media queries.
css
```
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
```
3
إضافة المسافات بـ gap

gap هو الاختصار الحديث لـ row-gap وcolumn-gap. يُعيّن المسافات بين المسارات — لا على الحواف الخارجية. لا مزيد من الهوامش السالبة أو حيل :last-child.
css
```
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
```
4
تسمية مناطق التخطيط بـ grid-template-areas

لتخطيطات مستوى الصفحة (header، وشريط جانبي، ومحتوى رئيسي، وfooter)، تجعل المناطق المسمّاة الهيكل يوثّق نفسه بنفسه. الرسم التخطيطي ASCII المرئي في CSS الخاص بك يعكس بالضبط كيفية عرض التخطيط.
css
```
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100dvh;
  gap: 0;
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }
```
5
تمديد العناصر عبر أعمدة متعددة

يمكن لبطاقة مميزة أو لافتة تحتاج إلى مساحة أفقية أكبر أن تمتد عبر أعمدة متعددة بتعريف واحد. استخدم -1 كخط نهاية للامتداد حتى آخر عمود، بغض النظر عن عدد الأعمدة.
css
```
/* span exactly 2 columns */
.featured {
  grid-column: span 2;
}

/* stretch from first to last column */
.banner {
  grid-column: 1 / -1;
}
```
6
أضف Breakpoints فقط عند الحاجة الحقيقية

يتولى auto-fit مع minmax معظم الاحتياجات المتجاوبة تلقائياً. أضف media query فقط حين يحتاج التخطيط نفسه إلى تغيير هيكلي — مثل طيّ الشريط الجانبي على الشاشات الصغيرة.
css
```
@media (max-width: 640px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}
```
7

استخدم Chrome DevTools لتصحيح الأخطاء

افتح DevTools، انقر على تبويب Elements، وابحث عن حاوية Grid. ستظهر شارة صغيرة grid بجانبها. انقر على الشارة لعرض خطوط الشبكة مباشرة على الصفحة — أرقام الأعمدة والصفوف وأسماء المناطق وأحجام المسافات كلها ترسم بصرياً. هذه أسرع طريقة لتشخيص العناصر المحاذاة خطأً.

نصائح ومحاذير

<code>auto-fit</code> يطوي المسارات الفارغة؛ أما <code>auto-fill</code> فيبقيها كأعمدة وهمية. استخدم <code>auto-fit</code> لشبكات البطاقات حتى تمتد العناصر لملء الصف.
تجنّب ارتفاعات الصفوف الثابتة (<code>grid-template-rows: 200px 200px</code>) إلا إذا احتجت تأثيراً شبيهاً بـ masonry — دع المحتوى يحدد ارتفاع الصف بدلاً من ذلك.
Grid وFlexbox متكاملان وليسا متنافسَين. استخدم Grid للهيكل ثنائي الأبعاد للصفحة؛ واستخدم Flexbox للمكونات أحادية الأبعاد (عناصر التنقل، ومجموعات الأزرار).
وحدة <code>fr</code> توزّع المساحة <em>المتاحة</em> بعد حسم المسارات ذات الحجم الثابت و<code>min-content</code>. لن تجعل العمود أصغر من محتواه أبداً.

خاتمة

حوّل CSS Grid التخطيط من صراع دائم إلى حرفة مباشرة. أتقن auto-fit مع minmax لشبكات البطاقات، وgrid-template-areas لهيكل الصفحة، وgrid-column: span N للعناصر المميزة. هذه الأنماط الثلاثة معاً تغطي الغالبية العظمى من متطلبات التخطيط الواقعي.

#CSS #Grid #Layout

العودة إلى جميع الأدلة

كيفية بناء تخطيط متجاوب باستخدام CSS Grid

الخطوات

تحويل أي عنصر إلى حاوية Grid

تعريف الأعمدة بـ grid-template-columns

إضافة المسافات بـ gap

تسمية مناطق التخطيط بـ grid-template-areas

تمديد العناصر عبر أعمدة متعددة

أضف Breakpoints فقط عند الحاجة الحقيقية

استخدم Chrome DevTools لتصحيح الأخطاء

نصائح ومحاذير

خاتمة

أدلة ذات صلة

كيفية نشر تطبيق Laravel على خادم VPS (Apache و MySQL)

كيفية إضافة دعم متعدد اللغات لتطبيق Laravel

كيفية إرسال رسائل بريد إلكتروني عبر Laravel

هل تحتاج مساعدة في مشروعك؟