CSS
🎯 CSS Grid Auto Flow Property
grid-auto-flow is a CSS Grid property that controls how items are automatically placed inside a grid container. It defines whether items are arranged by rows or columns and how empty spaces are handled.
🔹 Values
1️⃣ row (default)
Items are placed horizontally. When a row is full, the next item moves to a new row.
2️⃣ column
Items are placed vertically. When a column is full, items continue in the next column.
3️⃣ row dense
Items are placed in rows and gaps are filled automatically to create a denser layout.
4️⃣ column dense
Items are placed in columns and empty spaces are filled automatically for a compact layout.
5️⃣ initial
Resets the property to its default value (row).
-
🧠 Quick Summary
- grid-auto-flow controls automatic item placement in CSS Grid.
- row → horizontal placement (default).
- column → vertical placement.
- dense → fills empty spaces for compact layout.