Reverse order of columns in CSS Grid Layout
Solution 1
As the Grid auto-placement algorithm lays out items in the container, it uses next available empty cells (source).
In your source code the A element comes before the B element:
<div id="container" class="reverse" style="width: 800px;">
<div class="a">A</div>
<div class="b">B</div>
</div>
Therefore, the grid container first places A, then uses the next available space to place B.
By default, the auto-placement algorithm looks linearly through the grid without backtracking; if it has to skip some empty spaces to place a larger item, it will not return to fill those spaces. To change this behavior, specify the
dense
keyword ingrid-auto-flow
.http://www.w3.org/TR/css3-grid-layout/#common-uses-auto-placement
grid-auto-flow: dense
One solution to this problem (as you have noted) is to override the default grid-auto-flow: row
with grid-auto-flow: dense
.
With grid-auto-flow: dense
, the Grid auto-placement algorithm will look to back-fill unoccupied cells with items that fit.
#container {
display: grid;
grid-template-columns: 240px 1fr;
grid-auto-flow: dense; /* NEW */
}
7.7. Automatic Placement: the
grid-auto-flow
propertyGrid items that aren’t explicitly placed are automatically placed into an unoccupied space in the grid container by the auto-placement algorithm.
grid-auto-flow
controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
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.
#container {
display: grid;
grid-template-columns: 240px 1fr;
grid-auto-flow: dense; /* NEW */
}
.a {
background: yellow;
}
.b {
background: blue;
color: white;
}
#container>.a {
grid-column: 1;
}
#container>.b {
grid-column: 2;
}
#container.reverse>.a {
grid-column: 2;
}
#container.reverse>.b {
grid-row: 1;
grid-column: 1;
}
<div id="container" class="reverse" style="width: 800px;">
<div class="a">A</div>
<div class="b">B</div>
</div>
grid-row: 1
Another solution would be to simply define the row for the second item.
#container>.b {
grid-column: 2;
grid-row: 1; /* NEW */
}
#container {
display: grid;
grid-template-columns: 240px 1fr;
}
.a {
background: yellow;
}
.b {
background: blue;
color: white;
}
#container>.a {
grid-column: 1;
}
#container>.b {
grid-column: 2;
grid-row: 1; /* NEW */
}
#container.reverse>.a {
grid-column: 2;
}
#container.reverse>.b {
grid-row: 1;
grid-column: 1;
}
<div id="container" class="reverse" style="width: 800px;">
<div class="a">A</div>
<div class="b">B</div>
</div>
Solution 2
I'm not sure how to reverse more grid items. But if you have 2 grid items in your grid, you can simply position 2nd grid item using below code.
#container > .b {
grid-column-start: 1;
grid-row-start: 1;
}
Solution 3
The simplest way is to add order: 1
to element B or order: -1
to element A in .reverse
It's also correct CSS rather than hack-y
Solution 4
I had this same issue just now. I tried auto-row-dense and then set the direction of the container parent to rtl. It worked.
Just this, on the plunker link, seemed to do the trick.
.reverse{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: dense;
direction: rtl;
}
Solution 5
I found out: I need to apply grid-auto-flow: dense;
on the container:
#container {
grid-template-columns: 240px 1fr;
display: grid;
grid-auto-flow: dense;
}
According to MDN, this algorithm attempts to fill in holes earlier in the grid.
Rob
Program Manager at Microsoft on the Chakra Runtime (the JavaScript engine used in IE 9 and newer). In a past life, I built apps using Windows Forms, ASP.NET, ASP.NET MVC, and occasionally WPF.
Updated on July 08, 2022Comments
-
Rob almost 2 years
I was hoping to use CSS Grid to reverse the apparent order of two side-by-side divs, where one of the divs grows arbitrarily (I don't want to use floats).
I've created a plunkr here: http://plnkr.co/edit/6WZBnHbwhD7Sjx2ovCO7?p=preview
#container { grid-template-columns: 240px 1fr; display: grid; } .a { background: yellow; } .b { background: blue; color: white; } #container>.a { grid-column: 1; } #container>.b { grid-column: 2; } #container.reverse>.a { grid-column: 2; } #container.reverse>.b { grid-column: 1; }
<div id="container" class="reverse" style="width: 800px;"> <div class="a">A</div> <div class="b">B</div> </div>
The crux of it is that when I have the
.reverse
class applied (so that you should seeB | A
),B
is offset to a new line so it looks more like:| A B
If I invert the document ordering of
.a
with.b
, this goes back to normal (but of course, if I drop the.reverse
class, I get the same problem).Why is this, and how can I address?