CSS Grid Auto Rows
خاصية grid-auto-rows مع grid في لغة CSS
سوف تتعلم في هذا الدرس خاصية grid-auto-rows ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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
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
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
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
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
CSS grid auto rows percentage
خاصية grid-auto-rows مع القيمة min content في لغة CSS.
.grid-container
{
display: grid;
background-color: #2196F3;
padding: 10px;
grid-auto-rows:50%;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
