none هي القيمة الأفتراضية وتعرض العناصر علي هيئة صفوف وأعمدة الناتجة عن خاصية grid-template-columns.
auto يتم تحديد حجم الصفوف حسب حجم الحاوية وحجم محتوى العناصر في الصف.
max-content يضبط حجم كل صف للاعتماد على أكبر عنصر في الصف.
min-content يضبط حجم كل صف للاعتماد على أصغر عنصر في الصف.
length يتم تحديد طول العنصر في الصف بقيمة ثابتة بوحدات مختلفة كوحدة px.

CSS grid-template-rows syntax

طريقة كتابة خاصية grid-template-rows في لغة CSS.

grid-template-rows:value;

CSS grid template rows

قيم خاصية grid-template-rows في لغة CSS.

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

</> CSS grid template rows none
خاصية grid-template-rows مع القيمة none في لغة CSS

تستخدم خاصية grid-template-rows في لغة CSS والقيمة none لعرض العناصر علي هيئة صفوف وأعمدة الناتجة عن خاصية grid-template-columns و none هي القيمة الأفتراضية.

جربها بنفسك

CSS grid template rows none

خاصية grid-template-rows القيمة none في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows:none none none;
  background-color: #2196F3;
  padding: 10px;
}

جربها بنفسك

</> CSS grid template rows auto
خاصية grid-template-rows مع القيمة auto في لغة CSS

تستخدم خاصية grid-template-columns في لغة CSS والقيمة auto ليتم تحديد حجم الصفوف حسب حجم الحاوية وحجم محتوى العناصر في الصف.

جربها بنفسك

CSS grid template rows auto

خاصية grid-template-rows القيمة auto في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  grid-template-rows:auto 200px auto;
  background-color: #2196F3;
  padding: 10px;
}

جربها بنفسك

CSS grid template rows two auto

خاصية grid-template-rows مع القيمة auto في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  grid-template-rows:auto 200px auto;
  background-color: #2196F3;
  padding: 10px;
}

جربها بنفسك

</> CSS grid template rows max content
خاصية grid-template-rows مع القيمة max-content في لغة CSS

تستخدم خاصية grid-template-rows في لغة CSS والقيمة max-content ليتم ضبط حجم كل صف للاعتماد على أكبر عنصر في الصف.

جربها بنفسك

CSS grid template rows max content

خاصية grid-template-rows القيمة max-content في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:auto auto;
  grid-template-columns:auto max-content;
  background-color: #2196F3;
  padding: 10px;
}

جربها بنفسك

</> CSS grid template rows min content
خاصية grid-template-rows مع القيمة min-content في لغة CSS

تستخدم خاصية grid-template-rows في لغة CSS والقيمة min-content ليتم ضبط حجم كل صف للاعتماد على أصغر عنصر في الصف.

جربها بنفسك

CSS grid template rows min content

خاصية grid-template-columnsمع القيمة min-content في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:auto auto;
  grid-template-rows:max-content auto ;
  background-color: #2196F3;
  padding: 10px;
}

جربها بنفسك

</> CSS grid template rows length
خاصية grid-template-rows مع القيمة length في لغة CSS

تستخدم خاصية grid-template-rows في لغة CSS والقيمة length لتحديد طول العنصر في الصف بقيمة ثابتة بوحدات مختلفة كوحدة px.

جربها بنفسك

CSS grid template rows length

خاصية grid-template-rows القيمة length في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:100px 100px 100px;
  grid-template-rows:100px 200px;
  background-color: #2196F3;
  padding: 10px;
}

جربها بنفسك

CSS grid template rows length with auto

خاصية grid-template-rows القيمة length مع القيمة auto في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:100px 100px 100px;
  grid-template-rows:auto 200px;
  background-color: #2196F3;
  padding: 10px;
}

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

CSS Grid Template Rows
خاصية grid-template-rows في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Grid Template Rows CSS

CSS Grid Template Rows

خاصية grid-template-columns في لغة CSS