Revision history [back]

The order of columns in a CSS grid can be modified using the order property. This property controls the order in which grid items are displayed, with items having lower order values appearing first.

To modify the order of columns, you can assign an order value to the relevant grid items. For example, if you have a five-column grid and want the last column to appear first, you can assign an order value of -1 to that column, like so:

grid-item:last-child {
  order: -1;
}

This will cause the last column to be displayed first in the grid, with the other columns following in their original order.

You can also use the order property to re-order other columns as well, simply by assigning different order values to each item. For example:

grid-item:nth-child(2) {
  order: 5;
}

This will cause the second column to be displayed fifth in the grid, while the other columns remain in their original order.

Note that the order property only affects the order in which grid items are displayed visually; it does not change their position in the HTML source or affect their accessibility to screen readers or other assistive technologies.