كيف تنشئ تخطيطًا باستخدام CSS Grid؟

Question

Accepted Answer

**CSS Grid** هو نظام تخطيط ثنائي الأبعاد — يتحكم في **الصفوف والأعمدة بشكل متزامن**، على عكس نظام Flexbox الذي يعمل على خط واحد. يمكنك تعريف شبكة على الحاوية ووضع العناصر بداخلها.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## وحدة fr و repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("الكسر") توزع المساحة المتاحة — `1fr 2fr` تقسمها بنسبة 1:2. `repeat(3, 1fr)` هو اختصار لثلاث مسارات متساوية.

## شبكة مستجيبة بدون استعلامات وسائط

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

هذا السطر الواحد ينشئ شبكة بطاقات مستجيبة بالكامل: كل عمود يكون بحد أدنى `250px`؛ المتصفح يناسب **أكبر عدد ممكن** لكل صف ويلتف الباقي — ينتقل تلقائيًا من 4 أعمدة على سطح المكتب إلى 1 على الجوال. `auto-fit` + `minmax` هي واحدة من الأنماط المفضلة في Grid.

## وضع العناصر عبر الخلايا

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

يمكن للعناصر أن تمتد عبر عدة صفوف/أعمدة، مما يتيح تخطيطات بأسلوب مجلة يصعب تحقيقها باستخدام Flexbox.

## Grid مقابل Flexbox

- **Grid** — تخطيط ثنائي الأبعاد (صفوف *و* أعمدة): تخطيطات الصفحة، شبكات البطاقات، لوحات التحكم.
- **Flexbox** — تخطيط أحادي البعد (صف واحد أو عمود واحد): أشرطة التنقل، مجموعات الأزرار، المحاذاة في المركز.

تتركب بشكل جيد — خلية الشبكة نفسها يمكن أن تكون حاوية flex.

## لماذا يهم

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

نمط `auto-fit`/`minmax` المستجيب وحده يزيل الحاجة إلى العديد من استعلامات الوسائط.