انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 92
دورة لغة CSS

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

سوف تتعلم في هذا الدرس خاصية grid-template-rows في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
9
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,117
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

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

تستخدم خاصية grid-template-rows مع حاوية grid لتحديد (عدد - وطول) العناصر الداخلية لحاوية grid في لغة CSS.


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

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

CSS grid-template-rows syntax

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

HTML 
grid-template-rows:value;

CSS grid template rows

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

HTML 
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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.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.

HTML 
.grid-container
{
  display: grid;
  grid-template-columns:100px 100px 100px;
  grid-template-rows:auto 200px;
  background-color: #2196F3;
  padding: 10px;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…