خصائص grid-auto-columns CSS

التعريف والاستخدام

تحدد خاصية grid-auto-columns حجم الأعمدة في وحدة الشبكة.

هذه الخاصية تؤثر فقط على الأعمدة التي لم يتم ضبط حجمها.

انظر أيضًا:

دليل CSSتصميم الشبكة CSS

دليل CSSخصائص grid-auto-rows

مثال

ضبط حجم الأعمدة الافتراضي في الشبكة:

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

جرب بنفسك

الصيغة CSS

grid-auto-columns: auto|max-content|min-content|length;

قيمة الخاصية

القيمة الوصف
auto القيمة الافتراضية. حجم الأعمدة يتم تحديده بناءً على حجم المعدة.
fit-content()
max-content تحديد حجم كل عمود بناءً على أكبر عنصر في العمود.
min-content تحديد حجم كل عمود بناءً على أقل عنصر في العمود.
minmax(min.max) تحديد نطاق الحجم الذي يكون أكبر أو يساوي min و أقل أو يساوي max.
length تحديد حجم الأعمدة باستخدام القيمة الطولية القانونية. انظروحدة القياس.
% تحديد حجم الأعمدة باستخدام النسبة المئوية.

تفاصيل التقنية

القيمة الافتراضية: auto
الوراثة: لا
صنع الحركة: يدعم. انظر:خصائص الحركة.
الإصدار: CSS Grid Layout Module Level 1
جافا سكربت الصيغة: object.style.gridAutoColumns="120px"

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44