CSS Grid يوفر خصائص محاذاة شاملة على مستويين:
**على مستوى الحاوية (Container):**
`justify-items` — محاذاة محتوى كل خلية أفقياً: start | end | center | stretch (الافتراضي)
`align-items` — محاذاة محتوى كل خلية عمودياً: start | end | center | stretch (الافتراضي)
`justify-content` — محاذاة الشبكة كلها داخل الحاوية أفقياً: start | end | center | stretch | space-between | space-around | space-evenly
`align-content` — محاذاة الشبكة كلها داخل الحاوية عمودياً.
**على مستوى العنصر (Item):**
`justify-self` — يتجاوز justify-items لعنصر واحد. `align-self` — يتجاوز align-items لعنصر واحد.
**place-items:** اختصار لـ align-items + justify-items. **place-content:** اختصار لـ align-content + justify-content.
| 1 | /* توسيط محتوى كل خلية */ |
| 2 | .grid { |
| 3 | display: grid; |
| 4 | grid-template-columns: repeat(3, 200px); |
| 5 | justify-items: center; |
| 6 | align-items: center; |
| 7 | gap: 16px; |
| 8 | } |
| 9 | |
| 10 | /* توسيط الشبكة كلها */ |
| 11 | .centered-grid { |
| 12 | display: grid; |
| 13 | place-content: center; /* يوسّط الشبكة في الحاوية */ |
| 14 | } |
مثال 1: بطاقات بمحاذاة متحكم بها
| 1 | .icon-grid { |
| 2 | display: grid; |
| 3 | grid-template-columns: repeat(4, 80px); |
| 4 | grid-auto-rows: 80px; |
| 5 | gap: 16px; |
| 6 | place-items: center; /* = align-items: center + justify-items: center */ |
| 7 | place-content: center; |
| 8 | } |
| 9 | |
| 10 | /* عنصر واحد مختلف */ |
| 11 | .icon-grid .special-item { |
| 12 | justify-self: start; |
| 13 | align-self: end; |
| 14 | } |