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