في هذا الدرس 6تصفّح المواضيع
CSS Grid Auto Columns
خاصية grid-auto-columns مع grid في لغة CSS
CSS Grid Auto Columns خاصية grid-auto-columns مع grid في لغة CSS
تستخدم خاصية grid-auto-columns مع حاوية grid في لغة CSS للتحكم في حجم الأعمدة داخل حاوية grid.
قيم خاصية grid-auto-columns في لغة CSS:
- auto هي القيمة الأفتراضية, يكون حجم العمود علي حسب حجم حاوية grid وحجم العناصر الأخري.
- max-content تتحكم في حجم كل عمود بناء علي أكبر عنصر داخل العمود.
- min-content تتحكم في حجم كل عمود بناء علي أصغر عنصر داخل العمود.
- length تتحكم في حجم عمود بقيمة ثابتة بوحدة px واحدات اخري مثل rem و rm.
- percentage تتحكم في حجم عمود بالنسبة المئوية %.
CSS grid-auto-columns syntax
طريقة كتابة خاصية grid-auto-columns في لغة CSS.
HTML
grid-auto-columns:value;
CSS grid-auto-columns values
قيم خاصية grid-auto-columns في لغة CSS.
HTML
grid-auto-columns:auto|max-content|min-content|length;
CSS grid auto columns auto
خاصية grid-auto-columns مع القيمة auto في لغة CSS
CSS grid auto columns auto خاصية grid-auto-columns مع القيمة auto في لغة CSS
تستخدم خاصية grid-auto-columns في لغة CSS والقيمة auto لليصبح حجم العمود علي حسب حجم حاوية grid وحجم العناصر الأخري, وهي القيمة الأفتراضية.
CSS grid auto columns auto
خاصية grid-auto-columns مع القيمة auto في لغة CSS.
HTML
.grid-container
{
display: grid;
background-color: #2196F3;
padding: 10px;
grid-auto-columns:auto;
}
CSS grid auto columns max content
خاصية grid-auto-columns مع القيمة max-content في لغة CSS
CSS grid auto columns max content خاصية grid-auto-columns مع القيمة max-content في لغة CSS
تستخدم خاصية grid-auto-columns في لغة CSS والقيمة max-content لتتحكم في حجم كل عمود بناء علي أكبر عنصر داخل العمود.
CSS grid auto columns max content
خاصية grid-auto-columns مع القيمة max content في لغة CSS.
HTML
.grid-container
{
display: grid;
background-color: #2196F3;
padding: 10px;
grid-auto-columns:max-content;
}
CSS grid auto columns min content
خاصية grid-auto-columns مع القيمة min-content في لغة CSS
CSS grid auto columns min content خاصية grid-auto-columns مع القيمة min-content في لغة CSS
تستخدم خاصية grid-auto-columns في لغة CSS والقيمة min-content لتتحكم في حجم كل عمود بناء علي أصغر عنصر داخل العمود.
CSS grid auto columns min content
خاصية grid-auto-columns مع القيمة min content في لغة CSS.
HTML
.grid-container
{
display: grid;
background-color: #2196F3;
padding: 10px;
grid-auto-columns:min-content;
}
CSS grid auto columns length
خاصية grid-auto-columns مع القيمة length في لغة CSS
CSS grid auto columns length خاصية grid-auto-columns مع القيمة length في لغة CSS
تستخدم خاصية grid-auto-columns في لغة CSS والقيمة length لتتحكم في حجم كل عمود بقيمة ثابتة مثل وحدة بكسل px.
CSS grid auto columns length
خاصية grid-auto-columns مع القيمة min content في لغة CSS.
HTML
.grid-container
{
display: grid;
background-color: #2196F3;
padding: 10px;
grid-auto-columns:200px;
}
CSS grid auto columns percentage
خاصية grid-auto-columns مع القيمة percentage في لغة CSS
CSS grid auto columns percentage خاصية grid-auto-columns مع القيمة percentage في لغة CSS
تستخدم خاصية grid-auto-columns في لغة CSS والقيمة percentage لتتحكم في حجم كل عمود بقيمة ثابتة بالنسبه المئوية.
CSS grid auto columns percentage
خاصية grid-auto-columns مع القيمة min content في لغة CSS.
HTML
.grid-container
{
display: grid;
background-color: #2196F3;
padding: 10px;
grid-auto-columns:25%;
}
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.