CSS

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

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

التاريخ

20 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

891

المواضيع

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

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
عدد التقييمات