Answer by Simon_Weaver for Reverse order of columns in CSS Grid Layout

Round peg in square hole

Remember even if you're using fancy 'new' grid features the older flex layout will still work. You can combine them, nest them and sometime you have to admit that certain problems like this may just be better solved with good old flex-direction: row-reverse.

But here's another way with grid.

Use named template regions

You can use named template regions and reverse them in the definition.

#container{  grid-template-areas: "a b";  grid-template-rows: 240px 1fr;  display: grid;}#container.reverse{  // note the order is flipped for both these properties  grid-template-areas: "b a";  grid-template-rows: 1fr 240px;}.a {  grid-area: a;  background: yellow;}.b {  grid-area: b;  background: blue;  color: white;}

Here's an more complex example that uses that technique with media queries.