انتقل إلى محتوى الدرس
الدرس 91
دورة لغة CSS

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

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

أقسام الدرس
6
الأمثلة
7
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,668
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

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

تستخدم خاصية 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

تستخدم خاصية 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

تستخدم خاصية 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

تستخدم خاصية 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

تستخدم خاصية 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%;
}

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…