إنشاء حاوية CSS Grid
لعمل عنصر HTML كحاوية شبكة، يجب عليك ضبط خاصية العرض (display) على grid أو inline-grid.
تتكون حاويات الشبكة من عناصر شبكة، يتم وضعها داخل الأعمدة والصفوف.
خاصية grid-template-columns
تعرف خاصية grid-template-columns عدد الأعمدة في تخطيط الشبكة الخاص بك، ويمكنها أيضًا تحديد عرض كل عمود.
القيمة عبارة عن قائمة منفصلة بمسافة، حيث تحدد كل قيمة عرض العمود المقابل.
إذا كنت تريد أن يحتوي تخطيط الشبكة الخاص بك على 4 أعمدة، فحدد عرض الأعمدة الأربعة، أو “auto” إذا كان يجب أن يكون عرض جميع الأعمدة متساوياً.
مثال
إنشاء شبكة بأربعة أعمدة:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
ملاحظة: إذا كان لديك أكثر من 4 عناصر في شبكة بأربعة أعمدة، فستضيف الشبكة تلقائيًا صفًا جديدًا لوضع العناصر فيه.
يمكن أيضًا استخدام خاصية grid-template-columns لتحديد حجم (عرض) الأعمدة.
مثال
تحديد حجم للأعمدة الأربعة:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
خاصية grid-template-rows
تشبه خاصية grid-template-rows خاصية grid-template-columns ولكنها خاصة بالصفوف بدلاً من الأعمدة. تحدد هذه الخاصية ارتفاع كل صف في تخطيط الشبكة الخاص بك.
تكون القيمة عبارة عن قائمة منفصلة بمسافة، حيث تحدد كل قيمة ارتفاع الصف المقابل. على غرار الخاصية grid-template-columns، يمكنك استخدام وحدات مختلفة لتحديد الارتفاع، مثل البكسل (px) أو النسبة المئوية (%) أو وحدات أخرى مدعومة من CSS.
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
خاصية justify-content
تستخدم خاصية justify-content لمحاذاة الشبكة بأكملها داخل الحاوية. تشبه هذه الخاصية إلى حد كبير خاصية justify-content المستخدمة في flexbox، حيث تتحكم في كيفية توزيع المحتوى على طول المحور الرئيسي (المحور الأفقي في الوضع الافتراضي).
القيم المقبولة لهذه الخاصية هي:
flex-start(الافتراضي): يتم محاذاة العناصر على يسار الحاوية (في الكتابة من اليسار إلى اليمين) أو يمين الحاوية (في الكتابة من اليمين إلى اليسار).flex-end: يتم محاذاة العناصر على يمين الحاوية (في الكتابة من اليسار إلى اليمين) أو يسار الحاوية (في الكتابة من اليمين إلى اليسار).center: يتمحاذاة العناصر في وسط الحاوية.space-between: يتم توزيع العناصر بالتساوي مع توزيع المساحة المتاحة بين العناصر وليس حولها.space-around: يتم توزيع المساحة المتاحة بشكل متساوي حول العناصر وكذلك بينها.
خاصية align-content
تستخدم خاصية align-content لمحاذاة الشبكة بأكملها عموديا داخل الحاوية. تشبه هذه الخاصية إلى حد كبير خاصية align-items المستخدمة في flexbox، حيث تتحكم في كيفية توزيع المحتوى على طول المحور المتقاطع (المحور العمودي في الوضع الافتراضي).
القيم المقبولة لهذه الخاصية هي:
flex-start(الافتراضي): يتم محاذاة العناصر في أعلى الحاوية.flex-end: يتم محاذاة العناصر في أسفل الحاوية.center: يتمحاذاة العناصر في وسط الحاوية عموديا.space-between: يتم توزيع العناصر بالتساوي مع توزيع المساحة المتاحة بين العناصر وليس حولها (تتشكل فجوات متساوية بين الصفوف).space-around: يتم توزيع المساحة المتاحة بشكل متساوي حول العناصر وكذلك بينها (تتشكل فجوات متساوية فوق وتحت الصفوف).
مثال
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
