حاوية شبكة CSS
1
2
3
4
5
6
7
8
حاوية الشبكة
لجعل عنصر HTML يعمل كحاوية شبكة ، يجب عليك تعيين displayالخاصية إلى
gridأو inline-grid.
تتكون حاويات الشبكة من عناصر الشبكة الموضوعة داخل الأعمدة والصفوف.
خاصية شبكة-قالب-أعمدة
تحدد الخاصية عدد grid-template-columnsالأعمدة في تخطيط الشبكة ، ويمكنها تحديد عرض كل عمود.
القيمة عبارة عن قائمة مفصولة بمسافات ، حيث تحدد كل قيمة عرض العمود المعني.
إذا كنت تريد أن يحتوي تخطيط شبكتك على 4 أعمدة ، فحدد عرض الأعمدة الأربعة ، أو "تلقائي" إذا كان يجب أن يكون لجميع الأعمدة نفس العرض.
مثال
اصنع شبكة من 4 أعمدة:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
ملاحظة: إذا كان لديك أكثر من 4 عناصر في شبكة من 4 أعمدة ، فستضيف الشبكة تلقائيًا صفًا جديدًا لوضع العناصر فيه.
يمكن grid-template-columnsأيضًا استخدام الخاصية لتحديد حجم (عرض) الأعمدة.
مثال
قم بتعيين حجم للأعمدة الأربعة:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
خاصية صفوف قالب الشبكة
grid-template-rowsتحدد الخاصية ارتفاع كل صف .
1
2
3
4
5
6
7
8
القيمة عبارة عن قائمة مفصولة بمسافات ، حيث تحدد كل قيمة ارتفاع الصف المعني:
مثال
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
خاصية تبرير المحتوى
تُستخدم justify-contentالخاصية لمحاذاة الشبكة بالكامل داخل الحاوية.
1
2
3
4
5
6
ملاحظة: يجب أن يكون العرض الإجمالي للشبكة أقل من عرض الحاوية حتى يكون justify-contentللخاصية أي تأثير.
مثال
.grid-container {
display: grid;
justify-content: space-evenly;
}
مثال
.grid-container {
display: grid;
justify-content: space-around;
}
مثال
.grid-container {
display: grid;
justify-content: space-between;
}
مثال
.grid-container {
display: grid;
justify-content: center;
}
مثال
.grid-container {
display: grid;
justify-content: start;
}
مثال
.grid-container {
display: grid;
justify-content: end;
}
خاصية محاذاة المحتوى
تُستخدم align-contentالخاصية لمحاذاة الشبكة بالكامل داخل الحاوية
عموديًا .
1
2
3
4
5
6
ملاحظة: يجب أن يكون الارتفاع الإجمالي للشبكة أقل من ارتفاع الحاوية حتى يكون align-contentللخاصية أي تأثير.
مثال
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
مثال
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
مثال
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
مثال
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
مثال
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
مثال
.grid-container {
display: grid;
height: 400px;
align-content: end;
}