72. محاذاة الشبكة: Justify مقابل Align

يستخدم Grid خصائص محاذاة مشابهة لـ Flexbox، ولكنها تتعلق بهيكل الشبكة بدلاً من التدفق.

1. محاذاة العناصر (وضع العناصر داخل الخلية)

تُطبق هذه الخصائص على الحاوية وتتحكم في كيفية وضع العناصر الفردية داخل خلية الشبكة الخاصة بها (أو منطقتها) إذا كان العنصر أصغر من الخلية.

justify-items: يحاذي العناصر أفقياً (على طول محور الصف) داخل خليتها.
align-items: يحاذي العناصر رأسياً (على طول محور العمود) داخل خليتها.

القيمة	الوصف
`stretch` (افتراضي)	يملأ العنصر الخلية.
`start`, `end`, `center`	يضع العنصر في بداية أو نهاية أو وسط الخلية.

2. محاذاة المحتوى (وضع الشبكة داخل الحاوية)

تُستخدم هذه الخصائص عندما يكون الحجم الإجمالي لمسارات الشبكة أصغر من حاوية الشبكة نفسها. إنها تتحكم في مكان وضع هيكل الشبكة بالكامل داخل الحاوية.

justify-content: يحاذي الشبكة بالكامل أفقياً في الحاوية.
align-content: يحاذي الشبكة بالكامل رأسياً في الحاوية.

القيمة	الوصف
`center`	يوسط هيكل الشبكة.
`space-between`, `space-around`, `space-evenly`	يوزع المساحة الزائدة بين المسارات.

قاعدة سريعة: إذا كنت تريد توسيط عنصر واحد، يمكنك استخدام justify-self: center; و align-self: center; مباشرة على العنصر (على غرار align-self في Flexbox).