I want my grid to fill in vertically:
1 4 7
2 5 8
3 6 9
Instead of it fills in horizontally:
1 2 3
4 5 6
7 8 9
In my grid I want to specify the number of columns, not the number of rows.
This is what my div looks:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
A grid container contains grid items. By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows. The grid-column property defines on which column (s) to place an item.
To place an item, you can refer to line numbers, or use the keyword "span" to define how many columns the item will span. The grid-row property defines on which row to place an item. You define where the item will start, and where the item will end.
Named grid items can be referred to by the grid-template-areas property of the grid container. Item1 gets the name "myArea" and spans all five columns in a five columns grid layout: The columns in each row is defined inside the apostrophes, separated by a space.
However, with a switch to grid-template-rows, grid items stack in a single column. There is no automatic creation of columns with grid-auto-flow: row and grid-template-rows. grid-template-columns must be defined (hence, the inverse relationship with grid-auto-flow ).
Initially, the grid lays out items in a horizontal direction. This is because an initial setting of a grid container is grid-auto-flow: row
.
That's what you're getting in your layout:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: row; /* default setting; can be omitted */
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
If you switch to grid-auto-flow: column
, then the grid items are laid out vertically.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
But for the row behavior in the vertical axis you need to define rows.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
grid-template-rows: 25px 25px 25px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
From the spec:
7.7. Automatic Placement: the
grid-auto-flow
propertyThis property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
row
The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither
row
norcolumn
is provided,row
is assumed.
column
The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary.
For an alternative solution to CSS Grid, which doesn't require specifying the number of rows, try CSS Columns: https://stackoverflow.com/a/44099977/3597276
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With