To flip the order of CSS grid columns, you can use the grid-auto-flow: column
property. This property changes the flow direction of grid elements along the columns, so setting it to column-reverse
will flip the order of the columns.
For example, if you have a 3-column grid with items in the order of A B C
, the following code will change the order to C B A
:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
}
.item {
grid-row: 1;
}
Note that you may need to adjust the positioning of items using the grid-row
property if you are also flipping the order of rows.
Asked: 2023-04-29 23:07:47 +0000
Seen: 11 times
Last updated: Apr 29 '23