عنصر شبكة CSS
1
2
3
4
5
العناصر الفرعية (العناصر)
تحتوي حاوية الشبكة على عناصر الشبكة .
بشكل افتراضي ، تحتوي الحاوية على عنصر شبكة واحد لكل عمود ، في كل صف ، ولكن يمكنك تصميم عناصر الشبكة بحيث تمتد على أعمدة و / أو صفوف متعددة.
خاصية عمود الشبكة:
grid-columnتحدد الخاصية العمود (الأعمدة) لوضع عنصر عليها .
أنت تحدد مكان بدء العنصر وأين سينتهي العنصر.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ملاحظة: الخاصية هي grid-columnخاصية مختصرة لـ grid-column-startو grid-column-endالممتلكات.
لوضع عنصر ، يمكنك الرجوع إلى أرقام الأسطر ، أو استخدام الكلمة الأساسية "span" لتحديد عدد الأعمدة التي سيمتد العنصر إليها.
مثال
اجعل "item1" يبدأ في العمود 1 وينتهي قبل العمود 5:
.item1 {
grid-column: 1 / 5;
}
مثال
اجعل "item1" يبدأ في العمود 1 ويمتد إلى 3 أعمدة:
.item1 {
grid-column: 1 / span 3;
}
مثال
اجعل "item2" يبدأ في العمود 2 ويمتد إلى 3 أعمدة:
.item2 {
grid-column: 2 / span 3;
}
خاصية صف الشبكة:
تحدد الخاصية الصف grid-rowالذي سيتم وضع عنصر فيه.
أنت تحدد مكان بدء العنصر وأين سينتهي العنصر.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ملاحظة: الخاصية هي grid-rowخاصية مختصرة لـ grid-row-startو grid-row-endالممتلكات.
لوضع عنصر ، يمكنك الرجوع إلى أرقام الأسطر ، أو استخدام الكلمة الأساسية "span" لتحديد عدد الصفوف التي سيمتد العنصر إليها:
مثال
اجعل "العنصر 1" يبدأ في سطر الصف 1 وينتهي في سطر الصف 4:
.item1 {
grid-row: 1 / 4;
}
مثال
اجعل "item1" يبدأ في الصف 1 ويمتد إلى صفين:
.item1 {
grid-row: 1 / span 2;
}
خاصية منطقة الشبكة
يمكن استخدام الخاصية grid-areaكخاصية مختصرة لـ
grid-row-start، والخصائص grid-column-start.grid-row-endgrid-column-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
مثال
اجعل "item8" يبدأ في سطر الصف 1 وسطر العمود 2 ، وينتهي في سطر الصف 5 وسطر العمود 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
مثال
اجعل "item8" يبدأ في سطر الصف 2 وسطر العمود 1 ، ويمتد إلى صفين و 3 أعمدة:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
تسمية عناصر الشبكة
يمكن grid-areaأيضًا استخدام الخاصية لتعيين أسماء لعناصر الشبكة.
رأس
قائمة الطعام
الأساسية
حق
تذييل
يمكن الإشارة إلى عناصر الشبكة المسماة grid-template-areasبخاصية حاوية الشبكة.
مثال
يحصل Item1 على اسم "myArea" ويمتد على جميع الأعمدة الخمسة في تخطيط شبكة من خمسة أعمدة:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
يتم تحديد كل صف بواسطة الفواصل العليا ("")
يتم تحديد الأعمدة في كل صف داخل الفواصل العليا ، مفصولة بمسافة.
ملاحظة: تمثل علامة الفترة عنصر شبكة بدون اسم.
مثال
دع "myArea" تمتد على عمودين في تخطيط شبكة من خمسة أعمدة (تمثل علامات الفترة عناصر بدون اسم):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
لتحديد صفين ، حدد عمود الصف الثاني داخل مجموعة أخرى من الفاصلات العليا:
مثال
اجعل "العنصر 1" يمتد على عمودين وصفين :
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
مثال
قم بتسمية جميع العناصر ، وقم بإنشاء قالب صفحة ويب جاهز للاستخدام:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
ترتيب العناصر
يتيح لنا تخطيط الشبكة وضع العناصر في أي مكان نريده.
ليس من الضروري أن يظهر العنصر الأول في كود HTML كعنصر أول في الشبكة.
1
2
3
4
5
6
مثال
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
يمكنك إعادة ترتيب أحجام شاشات معينة باستخدام استعلامات الوسائط:
مثال
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}