CSS

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

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

التاريخ

20 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

702

المواضيع

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

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

تستخدم خاصية grid-auto-columns في لغة CSS والقيمة auto لليصبح حجم العمود علي حسب حجم حاوية grid وحجم العناصر الأخري, وهي القيمة الأفتراضية.
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

تستخدم خاصية grid-auto-columns في لغة CSS والقيمة max-content لتتحكم في حجم كل عمود بناء علي أكبر عنصر داخل العمود.
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

تستخدم خاصية grid-auto-columns في لغة CSS والقيمة min-content لتتحكم في حجم كل عمود بناء علي أصغر عنصر داخل العمود.
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

تستخدم خاصية grid-auto-columns في لغة CSS والقيمة length لتتحكم في حجم كل عمود بقيمة ثابتة مثل وحدة بكسل px.
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

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

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

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

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.