CSS Grid Template Columns
خاصية grid-template-columns في لغة CSS
سوف تتعلم في هذا الدرس خاصية grid-template-columns في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Grid Template Columns
خاصية grid-template-columns في لغة CSS
</>
CSS grid template columns
خاصية grid-template-columns في لغة CSS
تستخدم خاصية grid-template-columns مع حاوية grid لتحديد (عدد - وعرض) العناصر الداخلية لحاوية grid في لغة CSS, لو تم ضبط ثلاث قيم بخاصية auto وعدد العناصر هي ستة عناصر فسوف يكون العرض علي صفين في كل صف ثلاثة عناصر إذا تم تحديد عدد العناصر لكل صف وعرض كل صف يكون ثلث المساحة.
قيم خاصية grid-template-columns في لغة CSS:
- none هي القيمة الأفتراضية وتعرض العناصر علي هيئة صف به عمود أو عنصر واحد فقط وكل عنصر يكون عرضه بعرض الحاوية إذا كان غير محدد.
- auto يتم توزيع مساحة الحاوية علي جميع العناصر الداخلية بالتساوي إذا كانت جميعها auto وإذا كانت العناصر الأخري بحجم ثابت بقيمة بكسل فالعنصر سيأخذ مساحة الحاوية المتبقية في حال عدم وجود fractions.
- max-content يتم تحديد عرض العنصر بناء علي عرض المحتوي الداخلي لهذا العنصر.
- min-content يتم تحديد عرض العنصر علي حسب أصغر عرض محتوي الداخلي لهذا العنصر.
- length يتم تحديد عرض العنصر بقيمة ثابتة بوحدات مختلفة كوحدة px.
CSS grid-template-columns syntax
طريقة كتابة خاصية grid-template-columns في لغة CSS.
grid-template-columns:value;
CSS grid template columns
قيم خاصية grid-template-columns في لغة CSS.
grid-template-columns:none|auto|max-content|min-content|length|initial|inherit;
</>
CSS grid template columns none
خاصية grid-template-columns مع القيمة none في لغة CSS
CSS grid template columns none
خاصية grid-template-columnsمع القيمة none في لغة CSS.
.grid-container
{
display: grid;
grid-template-columns:none;
background-color: #2196F3;
padding: 10px;
}
</>
CSS grid template columns auto
خاصية grid-template-columns مع القيمة auto في لغة CSS
تستخدم خاصية grid-template-columns في لغة CSS والقيمة auto لتوزيع مساحة الحاوية علي جميع العناصر الداخلية بالتساوي إذا كانت جميعها auto وإذا كانت العناصر الأخري بحجم ثابت بقيمة بكسل فالعنصر التي تحمل قيمة auto سيكون لها مساحة الحاوية المتبقية في حال عدم وجود fractions.
- سيكون للعنصر مساحة بحجم محتواه الداخلي في حال وجود fractions تكون الأولوية ل fractions .
CSS grid template columns auto
خاصية grid-template-columns مع القيمة auto في لغة CSS.
.grid-container
{
display: grid;
grid-template-columns:auto auto auto;
background-color: #2196F3;
padding: 10px;
}
CSS grid template columns two auto
خاصية grid-template-columns مع القيمة auto لعمل 2 عمود في كل صف في لغة CSS.
.grid-container
{
display: grid;
grid-template-columns:auto auto;
background-color: #2196F3;
padding: 10px;
}
</>
CSS grid template columns length
خاصية grid-template-columns مع القيمة length في لغة CSS
CSS grid template columns length with auto
خاصية grid-template-columnsمع القيمة length مع القيمة auto في لغة CSS.
.grid-container
{
display: grid;
grid-template-columns:100px 100px auto;
background-color: #2196F3;
padding: 10px;
}
CSS grid template columns length
خاصية grid-template-columnsمع القيمة length في لغة CSS.
.grid-container
{
display: grid;
grid-template-columns:100px 100px 100px;
background-color: #2196F3;
padding: 10px;
}
</>
CSS grid template columns max content
خاصية grid-template-columns مع القيمة max-content في لغة CSS
CSS grid template columns max content
خاصية grid-template-columnsمع القيمة max-content في لغة CSS.
.grid-container
{
display: grid;
grid-template-columns:max-content max-content max-content;
background-color: #2196F3;
padding: 10px;
}
</>
CSS grid template columns min content
خاصية grid-template-columns مع القيمة min-content في لغة CSS
CSS grid template columns min content
خاصية grid-template-columnsمع القيمة min-content في لغة CSS.
.grid-container
{
display: grid;
grid-template-columns:min-content min-content min-content;
background-color: #2196F3;
padding: 10px;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
