خصائص grid-template-columns CSS

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

سمة grid-template-columns تحدد عدد الصفوف في تصميم الشبكة (وحجمها).

هذه القيم هي قائمة مفصولة بالأرقام، حيث يحدد كل قيمة حجم الصف المطلوب.

انظر أيضًا:

دليل CSSتصميم شبكة CSS

دليل CSSسمة grid-template-rows

دليل CSSسمة grid-template

مثال

مثال 1

صنع صندوق شبكة من أربعة صفوف:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

تجربة شخصية

مثال 2

صنع تصميم شبكة من أربعة صفوف، وضبط حجم كل صف:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

تجربة شخصية

صيغة CSS

grid-template-columns: لا شيء|auto|max-content|min-content|طول|مبدئي|وراثة;

قيمة السمة

القيمة الوصف
لا شيء القيمة الافتراضية. في الحاجة إلى إنشاء الصفوف.
auto حجم الصف يعتمد على حجم المعدة وأحجام محتويات الصف.
max-content ضبط حجم كل صفة بناءً على أكبر عنصر في الصف.
min-content ضبط حجم كل صفة بناءً على أقل عنصر في الصف.
طول ضبط حجم الصفوف عبر استخدام قيم طول قانونية. راجع:وحدة الطول.
مبدئي ضبط هذا السمة إلى قيمته الافتراضية. راجع: مبدئي.
وراثة ورث هذا السمة من عنصر الأب. راجع: وراثة.

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

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

دعم المتصفح

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

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