يمكنك تحديد مكان عنصر Grid بدقة عبر أرقام خطوط الشبكة (Grid Lines).
**grid-column-start / grid-column-end:** `grid-column-start: 1; grid-column-end: 3;` → يمتد من الخط 1 إلى الخط 3 (يأخذ عمودين).
**الاختصار:** `grid-column: 1 / 3;` `grid-column: 1 / -1;` → يمتد من أول خط لآخر خط (عرض كامل).
**span:** بديل لتحديد نهاية: `grid-column: span 2;` → يمتد عمودين من موقعه الحالي.
**grid-row:** نفس المبدأ للصفوف.
**ملاحظة:** أرقام الخطوط تبدأ من 1 (ليس 0). الأرقام السالبة تبدأ من النهاية (-1 = آخر خط).
| 1 | /* عنصر يمتد عمودين كاملين */ |
| 2 | .featured { grid-column: 1 / -1; } /* عرض كامل */ |
| 3 | |
| 4 | /* عنصر يمتد عمودين بداية من موقعه */ |
| 5 | .wide-card { grid-column: span 2; grid-row: span 2; } |
| 6 | |
| 7 | /* وضع عنصر في خلية محددة */ |
| 8 | .special { grid-column: 2 / 4; grid-row: 1 / 3; } |
مثال 1: معرض Masonry بـ span
| 1 | .bento-grid { |
| 2 | display: grid; |
| 3 | grid-template-columns: repeat(4, 1fr); |
| 4 | grid-auto-rows: 160px; |
| 5 | gap: 16px; |
| 6 | } |
| 7 | |
| 8 | /* بطاقات مختلفة الأحجام */ |
| 9 | .bento-grid .item-1 { grid-column: span 2; grid-row: span 2; } |
| 10 | .bento-grid .item-4 { grid-column: span 2; } |
| 11 | .bento-grid .item-7 { grid-column: 1 / -1; } /* عرض كامل */ |