عنصر الشبكة CSS

1
2
3
4
5

تجربة بنفسك

الأبناء (المشاريع)

المحتوي يحتوي على مشاريع الشبكة.

بافتراض، يحتوي الحاوية على مشروع في كل عمود في كل صف، ولكن يمكنك تعيين نمط المشروع ليعبر عدة أعمدة وأو صفوف.

خصائص grid-column:

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

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" لتحديد عدد السطور التي سيشملها هذا العنصر:

مثال

اجعل "item1" يبدأ من row-line 1 ويبدأ في row-line 4:

.item1 {
  grid-row: 1 / 4;
}

تجربة بنفسك

مثال

اجعل "item1" يبدأ من السطر 1 ويشمل 2 سطرًا:

.item1 {
  grid-row: 1 / span 2;
}

تجربة بنفسك

خصائص grid-area

grid-area يمكن استخدام الخاصية كاختصار للخصائص grid-row-start و grid-column-start و grid-row-end و grid-column-end.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

مثال

اجعل "item8" يبدأ من row-line 1 وcolumn-line 2 ويبدأ في row-line 5 وينتهي في column line 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

تجربة بنفسك

مثال

اجعل "item8" يبدأ من row-line 2 وcolumn-line ويشمل 2 صفوف و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 . . .';
}

تجربة بنفسك

لتحديد سطرين، قم بتحديد السطر الثاني في مجموعة أخرى من الأسهم:

مثال

لجعل "item1" يتجاوز سطرين وثلاثة أعمدة:

.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; }
}

تجربة بنفسك