Revision history [back]

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.