خصائص grid-template-rows CSS

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

grid-template-rows يحدد عدد السطور في تخطيط الشبكة (وارتفاعها).

القيمة هي قائمة منفصلة بالأبيض، حيث يتم تحديد ارتفاع كل سطر.

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

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

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

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

مثال

تحديد حجم السطر (الارتفاع):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

تجربة شخصية

CSS Syntax

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

قيمة الخاصية

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

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

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

دعم المتصفح

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

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