CSS

CSS Grid Auto Rows
خاصية grid-auto-rows مع grid في لغة CSS

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

التاريخ

21 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

286

المواضيع

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

CSS Grid Auto Rows
خاصية grid-auto-rows مع grid في لغة CSS

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

تستخدم خاصية grid-auto-rows مع حاوية grid في لغة CSS للتحكم في حجم الصفوف داخل حاوية grid.


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

  • auto هي القيمة الأفتراضية, يكون حجم الصف علي حسب حجم حاوية grid وحجم العناصر الأخري.
  • max-content تتحكم في حجم كل صف بناء علي أكبر عنصر داخل العمود.
  • min-content تتحكم في حجم كل صف بناء علي أصغر عنصر داخل العمود.
  • length تتحكم في حجم صف بقيمة ثابتة بوحدة px واحدات اخري مثل rem و rm.
  • percentage  تتحكم في حجم صف بالنسبة المئوية %.
CSS grid-auto-rows syntax

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

grid-auto-rows:value;
CSS grid-auto-rows values

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

grid-auto-rows:auto|max-content|min-content|length;

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

تستخدم خاصية grid-auto-rows في لغة CSS والقيمة auto لليصبح حجم الصف علي حسب حجم حاوية grid وحجم العناصر الأخري, وهي القيمة الأفتراضية.
CSS grid auto rows auto

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

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

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

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

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

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

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

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

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

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

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

تستخدم خاصية grid-auto-rows في لغة CSS والقيمة length لتتحكم في حجم كل صف بقيمة ثابتة مثل وحدة بكسل px.
CSS grid auto rows length

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

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

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

تستخدم خاصية grid-auto-rows في لغة CSS والقيمة percentage لتتحكم في حجم كل صف بقيمة ثابتة بالنسبه المئوية.
CSS grid auto rows percentage

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

.grid-container
{
  display: grid;
  background-color: #2196F3;
  padding: 10px;
  grid-auto-rows:50%;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات