Reverse order of columns in CSS Grid Layout

html

responsive-design

grid-layout

css-grid

byAlex Kataev·Mar 5, 2025

The quickest and easiest way to reverse your CSS Grid columns is by leveraging the order property. There is no need to adjust grid-template-areas or grid-column-start/end:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item { 
  order: -1; /* Higher order values place items later. Age before beauty! */
}

This strategy orders your grid items so they display in reverse, without the need for individual item modifications.

Step up your game with `grid-auto-flow`

To reverse your grid while preserving the content sequence in your source code, apply grid-auto-flow. This is your go-to for situations where order alone doesn't cut it.

Unveil the mystery of auto-placement

When it's about auto-placement, grid-auto-flow is the king. Using the dense keyword ensures that your grid snugly fills up any empty cells, crucial for reversing columns.

.grid-container {
  grid-auto-flow: column dense;
}

Combine this with direction: rtl and you've got your columns reversed like a pro.

Mind your Ps and Qs: Accessibility

While you show off your skills flipping columns, remember to consider accessibility. Is the visual rearrangement disrupting the logical tab order?

Nested structure control

Nested elements should play along the reverse order. Apply the reverse styles to keep the user experience consistent. Like mother, like daughter, right?

Grid placement to your rescue

Sometimes order and direction might not do the trick. In such cases, grid-column-start and grid-row-start give you control over grid items placement.

Grid behaviour amidst reversed order

Flipping the document order may fix temporary issues, but might fail to resolve underlying problems like class and style conflicts. "Band-aids don't fix bullet holes", so you might need to use additional CSS.

Watch out for class-based pitfalls

Changing element order can create the need for workaround measures like adding classes. This could end up reopening the pandora box of layout issues. Tread carefully!

Staying vigilant during reversal

Reversing the grid layout could lead to changes in usability and accessibility, so keep your eyes peeled. You wouldn't want to create a Picasso when all you intended was a simple mirror image.