خصائص grid-template-areas CSS

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

تحدد سمة grid-template-areas مناطق التخطيط الشبكي.

يمكنك استخدام grid-area أسماء المشاريع الشبكية، ثم استدعاء هذا الاسم في سمة grid-template-areas.

كل منطقة م界定 بالكوسة. استخدم النقاط المقطعة لاستدلال العناصر غير المسمى بالشبكة.

يرجى الرجوع أيضًا إلى:

دليل CSSمشاريع شبكة CSS

دليل CSSخصائص grid-area

دليل CSSخصائص grid-template

مثال

مثال 1

لجعل العنصر المسمى "myArea" يشمل عمودين في تخطيط شبكة خمس أعمدة:

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

جرب بنفسك

مثال 2

يحدد سطرين، حيث "item1" يشمل العمودين الأولين في السطرين الأولين (في تخطيط شبكة خمس أعمدة):

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

جرب بنفسك

مثال 3

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

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

جرب بنفسك

نحو CSS

grid-template-areas: none|itemnames;

قيمة الخاصية

القيمة الوصف
لا شيء القيمة الافتراضية. مناطق الشبكة غير المسمى (grid areas).
itemnames يحدد ترتيب عرض كل عمود وكل سطر.

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

القيمة الافتراضية: لا شيء
الوراثة: لا
صنع الرسوم المتحركة: يدعم. يرجى الرجوع إلى:خصائص الرسوم المتحركة.
الإصدار: وحدة تخطيط شبكة CSS Grid Layout المستوى 1
جافا سكربت نحو: object.style.gridTemplateAreas=". . . myArea myArea"

دعم المتصفح

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

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