CSS

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

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

التاريخ

09 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

419

المواضيع

24
الشروحات chevron_left CSS Grid Template Rows chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

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

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;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات