خصائص grid-auto-flow CSS

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

يتحكم خاصية grid-auto-flow في كيفية إدراج العناصر الموضوعة تلقائيًا داخل الشبكة.

يرجى أيضًا الرجوع إلى:

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

مثال

مثال 1

إدراج العناصر الموضوعة تلقائيًا عموديًا:

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

جرب بنفسك

مثال 2

تعبئة جميع الثقوب في الشبكة عن طريق إضافة قيمة "dense":

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

جرب بنفسك

syntax CSS

grid-auto-flow: row|column|dense|row dense|column dense;

قيمة الخاصية

القيمة الوصف
row القيمة الافتراضية. يتم وضع العناصر من خلال تعبئة كل سطر.
column وضع العناصر من خلال تعبئة كل عمود.
dense وضع العناصر لتعبئة أي ثقب في الشبكة.
row dense يتم وضع العناصر من خلال تعبئة كل سطر وتعبئة أي ثقب في الشبكة.
column dense يتم وضع العناصر من خلال تعبئة كل عمود وتعبئة أي ثقب في الشبكة.

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

القيمة الافتراضية: row
الوراثة: لا
صنع التحرك: يدعم. يرجى الرجوع إلى:خصائص المتحرك.
الإصدار: مستوى 1 لـ CSS Grid Layout Module
جافا سكريبت syntax: object.style.gridAutoFlow="row dense"

دعم المتصفح

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

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