ویژگی 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;
}

آزمایش کنید

شیوه‌نامه CSS

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

مقدار ویژگی

مقدار توضیحات
row مقدار پیش‌فرض. با پر کردن هر ردیف، آیتم‌ها را قرار دهید.
column با پر کردن هر ستون، آیتم‌ها را قرار دهید.
dense آیتم‌ها را قرار دهید تا هر سوراخ موجود در شبکه پر شود.
row dense با پر کردن هر ردیف، آیتم‌ها را قرار دهید و هر سوراخ موجود در شبکه را پر کنید.
column dense با پر کردن هر ستون، آیتم‌ها را قرار دهید و هر سوراخ موجود در شبکه را پر کنید.

جزئیات فنی

مقدار پیش‌فرض: row
ارث: خیر
انیمیشن‌سازی: پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: مодуل چیدمان شبکه CSS Grid Level 1
شیوه‌نامه جاوااسکریپت: object.style.gridAutoFlow="row dense"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.

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