خصائص grid-template CSS

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

خصائص grid-template هي اختصار لخصائص التالية:

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

دليل CSSعناصر الشبكة CSS

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

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

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

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

مثال

مثال 1

صنع تصميم شبكة ثلاثية الأعمدة بعلو 150 بكسل

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

جرب بنفسك

مثال 2

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

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    '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:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

جرب بنفسك

جملة CSS

grid-template: لا شيء|grid-template-rows / grid-template-columns|grid-template-areas|القيمة الافتراضية|وراثة;
قيمة الخاصية
القيمة الوصف
لا شيء القيمة الافتراضية. لا يحدد حجم الأعمدة أو الصفوف.
grid-template-rows / grid-template-columns يحدد حجم الأعمدة والصفوف.
grid-template-areas يحدد استخدام ترتيب الشبكة بناءً على اسم المشاريع.
القيمة الافتراضية ضع هذا الخصائص على القيمة الافتراضية. انظر إلى: القيمة الافتراضية.
وراثة يرث هذا الخصائص من عنصر الأب. انظر إلى: وراثة.

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

القيمة الافتراضية: لا شيء لا شيء لا شيء
الوراثة: لا
صنع المتحرك: يدعم. انظر إلى:خصائص المتحرك.
الإصدار: CSS Grid Layout Module Level 1
جافا سكربت الجملة: object.style.gridTemplate = "250px / auto auto"

دعم المتصفح

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

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