How can I reverse the CSS grid columns order?

Question

I want to be able to reverse the order of columns (the two small ones to the left, and the big one to the right). I've tried several solutions, but I didn't find one that works.

Here's the code:

.images-block-box{

    display: grid;
    grid-gap: 16px;
    grid-template-columns: 708fr 340fr;

    & > div:first-child{
      grid-row: span 2;
    }

    &.reverse{
      grid-template-columns: 340fr 708fr;

      & > div:first-child{
         order: 2; // This doesn't work (I want to place the first item at the end of the 3)
      }
    } // reverse

} // images-block-box

Note that I really want to reverse the order of the columns themselves, not just their dimensions.

Dupe of https://stackoverflow.com/questions/45383042/reverse-order-of-columns-in-css-grid-layout — mikemaccana, Jun 25 '19 at 12:33
Possible duplicate of [Reverse order of columns in CSS Grid Layout](https://stackoverflow.com/questions/45383042/reverse-order-of-columns-in-css-grid-layout) — mikemaccana, Jun 25 '19 at 12:33
`//` is [not a valid comment character sequence in CSS](https://stackoverflow.com/questions/2479351/why-do-comments-work-in-stylesheets-but-comments-dont) (only the C style `/* */` is). Most browsers will terminate parsing and ignore some of the CSS content. What this in the original source or only here? — Peter Mortensen, Mar 30 '23 at 00:31

score 9 · Accepted Answer · edited Mar 30 '23 at 00:35

Simply adjust grid-column and consider grid-auto-flow:dense; to allow the next elements to be placed before:

.grid {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 2fr 1fr;
  grid-auto-flow:dense;
  margin:5px;
}

.grid div {
  min-height: 50px;
  border: 1px solid;
}

.grid div:first-child {
  grid-row: span 2;
}

.grid.reverse {
  grid-template-columns: 1fr 2fr;
}

.grid.reverse div:first-child {
  grid-column:2;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid reverse">
  <div></div>
  <div></div>
  <div></div>
</div>

dense

If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.^ref

score 2 · Answer 2 · edited Mar 30 '23 at 00:36

Another option is to place the big box to the last column by using grid-column-end: -1. See the demo below:

.images-block-box {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 708fr 340fr;
  grid-template-rows: 100px 100px;
  grid-auto-flow: column;
}

.images-block-box>div {
  border: 1px solid;
}

.images-block-box>div:first-child {
  grid-row: span 2;
}

.images-block-box.reverse {
  grid-template-columns: 340fr 708fr;
}

.images-block-box.reverse>div:first-child {
  grid-column-end: -1;
}

<div class="images-block-box">
  <div></div>
  <div></div>
  <div></div>
</div>
<br/>
<div class="images-block-box reverse">
  <div></div>
  <div></div>
  <div></div>
</div>

grid-column-end

<integer> && <custom-ident>?

Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

score 2 · Answer 3 · edited Mar 30 '23 at 00:37

2

Here is a sum-up. The working techniques pointed out till now are:

grid-auto-flow: dense (container) + grid-column: 2 (first-child)
grid-auto-flow: column (container) + grid-column-end: -1 (first-child)

The rest of the code remains the same. Please take a look at the related answers.

Both are currently working well (at least in major/modern browsers).

edited Mar 30 '23 at 00:37

Peter Mortensen

30,738
21
105
131

answered Mar 26 '19 at 14:34

Luca Reghellin

7,426
12
73
118

score 0 · Answer 4 · edited Mar 30 '23 at 00:34

0

Then maybe you can use a different approach:

.grid {
    display: grid;
    grid-template-columns: 5fr 2fr;
    grid-template-rows: 1fr 1fr;
    height: 500px;
    grid-gap: 2rem;
}

.one {
    background-color: red;
    grid-row: 1 / 3;
}

.two {
    background-color: green;
}

.three {
    background-color: blue;
}

.reverse > .one {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.reverse > .three {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

<h1>Without Reverse</h1>

<div class="grid">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

<h1>With Reverse</h1>


<div class="grid reverse">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

edited Mar 30 '23 at 00:34

Peter Mortensen

30,738
21
105
131

answered Mar 26 '19 at 14:06

Gaurav Bhardwaj

328
2
8

I'm using 3 elements. Try with 3 and you'll see it doesn't really work. – Luca Reghellin Mar 26 '19 at 14:26
the new 3 items solution is not what I'm looking for, since it's not a real reverse. Please see the accepted answers. – Luca Reghellin Mar 26 '19 at 15:04

How can I reverse the CSS grid columns order?

4 Answers4