**grid-auto-flow:** يتحكم في كيفية وضع العناصر التي لم تُحدَّد أماكنها: - `row` — تملأ صفاً بصف (الافتراضي) - `column` — تملأ عموداً بعمود - `dense` — يحاول ملء الفراغات بالعناصر الصغيرة
**grid-auto-rows:** يحدد ارتفاع الصفوف التي تُنشأ تلقائياً. `grid-auto-rows: 200px` — ارتفاع ثابت `grid-auto-rows: minmax(150px, auto)` — ارتفاع مرن
**grid-auto-columns:** يحدد عرض الأعمدة المُنشأة تلقائياً (عند grid-auto-flow: column).
**الفرق بين template وauto:** - `grid-template-*` — يحدد الصفوف/الأعمدة التي تعلمها مسبقاً. - `grid-auto-*` — يتحكم في الصفوف/الأعمدة التي تُنشأ ضمنياً عند فيضان العناصر.
| 1 | /* شبكة بصفوف ذات ارتفاع ثابت */ |
| 2 | .grid { |
| 3 | display: grid; |
| 4 | grid-template-columns: repeat(3, 1fr); |
| 5 | grid-auto-rows: minmax(180px, auto); |
| 6 | gap: 20px; |
| 7 | } |
| 8 | |
| 9 | /* ملء الفراغات بـ dense */ |
| 10 | .masonry-like { |
| 11 | grid-auto-flow: row dense; |
| 12 | } |
مثال 1: معرض صور بـ dense packing
| 1 | .photo-grid { |
| 2 | display: grid; |
| 3 | grid-template-columns: repeat(3, 1fr); |
| 4 | grid-auto-rows: 200px; |
| 5 | grid-auto-flow: row dense; |
| 6 | gap: 8px; |
| 7 | } |
| 8 | |
| 9 | .photo-grid img { |
| 10 | width: 100%; height: 100%; |
| 11 | object-fit: cover; |
| 12 | } |
| 13 | |
| 14 | .photo-grid .landscape { grid-column: span 2; } |
| 15 | .photo-grid .portrait { grid-row: span 2; } |
| 16 | .photo-grid .big { grid-column: span 2; grid-row: span 2; } |