خصائص grid-area لـ CSS

التعريف والاستخدام

خصائص grid-area للعناصر الشبكية، وحجمها في التخطيط الشبكي، وهي اختصار للخصائص التالية:

يمكن استخدام خاصية grid-area أيضًا لتخصيص الأسماء للعناصر الشبكية. ثم يمكن استخدامها من خلال grid-template-areas الاستشهادات الخاصة بالعناصر الشبكية المسماة. انظر الأمثلة أدناه.

انظر أيضًا:

دليل CSS:تخطيط الشبكة CSS

مثال

مثال 1

يبدأ "item1" في السطر 2، العمود 1، ويشمل 2 سطرًا و3 أعمدة:

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

تجربة شخصية

إشارة:يوجد أمثلة أكثر في قاعدة البيانات في أسفل الصفحة.

قواعد النصوص CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

قيمة الخاصية

القيمة الوصف
grid-row-start تحديد من أي سطر يبدأ عرض العنصر.
grid-column-start تحديد من أي عمود يبدأ عرض العنصر.
grid-row-end يحدد أين تتوقف عرض العنصر عند خط السطر، أو يسيطر على عدد من السطور.
grid-column-end يحدد أين تتوقف عرض العنصر عند خط العمود، أو يسيطر على عدد من الأعمدة.
itemname يحدد العناصر لمشروع الشبكة.

تفاصيل التقنية

القيمة الافتراضية: auto / auto / auto / auto
الوراثة: لا
صنع الرسوم المتحركة: يدعم. يرجى الرجوع إلى:خصائص الرسوم المتحركة.
الإصدار: مodule تخطيط شبكة CSS المستوى 1
قواعد اللغة الجافا سكريبت object.style.gridArea="1 / 2 / span 2 / span 3"

مزيد من الأمثلة

مثال 2

تم تسمية 'Item1' بـ 'myArea'، ويسيطر على جميع الخمسة عناصر في تخطيط الشبكة الخمسة عناصر:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

تجربة شخصية

مثال 3

جعل 'myArea' يسيطر على عمودين في تخطيط الشبكة الخمسة العناصر (النقاط المائلة تعني عدم وجود اسم للمشروع):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
}

تجربة شخصية

مثال 4

جعل 'item1' يسيطر على صفين وعمودين:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

تجربة شخصية

مثال 5

أسم جميع العناصر، وأعد تصميم نموذج صفحة جاهز:

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

تجربة شخصية

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذه الخاصية.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44