CSS گرید آٹو فلو کی خاصیت
- پچھلے پیچھے grid-auto-columns
- پچھلے پیچھے grid-auto-rows
تعریف و استفاده
ویژگی 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 Layout Module Level 1 |
| نویسی جاوااسکریپت: | object.style.gridAutoFlow="row dense" |
پشتیبانی مرورگر
تبلیغات میگوید که نسخه اولین مرورگر که این ویژگی کامل را پشتیبانی میکند.
| چروم | IE / ایج | فائرفاکس | سافری | اوپرا |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- پچھلے پیچھے grid-auto-columns
- پچھلے پیچھے grid-auto-rows
