خصائص grid CSS

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

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

يرجى الرجوع إلى:

دليل CSS:حاوية شبكة CSS

مثال

مثال 1

صنع تصميم شبكة ثلاثي الأعمدة، حيث يكون الارتفاع في السطر الأول 150 بكسل:

.grid-container {
  عرض: شبكة;
  grid: 150px / auto auto auto;
}

جرب بنفسك

مثال 2

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

.item1 {
  grid-area: منطقة_حاليه;
}
.grid-container {
  عرض: شبكة;
  شبكة:
    'منطقة_حاليه منطقة_حاليه ...'
    'منطقة_حاليه منطقة_حاليه ...';
}

جرب بنفسك

مثال 3

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

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  عرض: شبكة;
  شبكة:
    header header header header header
    'menu main main main right right'
    'menu footer footer footer footer';
}

جرب بنفسك

نص CSS

grid: لا شيء|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|مبدئي|وراثة;

قيمة الخاصية

القيمة الوصف
لا شيء القيمة الافتراضية. لا يتم تعريف ابعاد السطر أو العمود.
grid-template-rows / grid-template-columns يحدد ابعاد العمود والسطر.
grid-template-areas يحدد استخدام تصميم الشبكة باستخدام العناصر المسمى.
grid-template-rows / grid-auto-columns يحدد الابعاد (الارتفاع) للسطر والابعاد التلقائية للعمود.
grid-auto-rows / grid-template-columns يحدد الابعاد التلقائية للسطر ويحدد خصائص grid-template-columns.
grid-template-rows / grid-auto-flow grid-auto-columns يحدد الابعاد (الارتفاع) للسطر وكيفية وضع العناصر التلقائية والابعاد التلقائية للعمود.
grid-auto-flow grid-auto-rows / grid-template-columns يحدد كيفية وضع العناصر التلقائية والابعاد التلقائية للسطر، وكذلك تعيين خصائص grid-template-columns.
مبدئي اعتماد هذا الخصائص إلى قيمته الافتراضية. يرجى الرجوع إلى مبدئي.
وراثة من خلال تركة العنصر الأب لخصائص هذا العنصر. يرجى الرجوع إلى وراثة.

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

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

دعم المتصفح

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

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

يرجى الرجوع إلى:

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

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

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

دليل CSS:خصائص grid-auto-rows

دليل CSS:خصائص grid-auto-columns

دليل CSS:خصائص grid-auto-flow

دليل CSS:خصائص grid-row-gap

دليل CSS:خصائص grid-column-gap