Reverse Column Order in CSS Grid Layout

Question

I was hoping to use CSS Grid to reverse the visible order of two side by side divs where one of the divs grows arbitrarily (I don't want to use float).

I created 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> 

Its essence is that when I apply the .reverse class (so you should see B | A ), B is shifted to a new line, so it looks more:

  | A B 

If I invert the order of the .a documents using .b , this will return to normal (but, of course, if I omit the .reverse class, I get the same problem).

Why is this and how can I apply?

Answer 1

Since the automatic grid layout algorithm contains elements in the container, it uses the following available empty cells ( source ).

In the source code, element A is before element B:

 <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 and then uses the next available space to place B.

By default, the automatic placement algorithm looks linearly through the grid without backtracking; if he must skip some empty spaces to accommodate a larger element, he will not come back to fill these gaps. To change this behavior, specify the dense keyword in grid-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 noted ) is to override the default grid-auto-flow: row using grid-auto-flow: dense .

Using grid-auto-flow: dense the automatic grid layout algorithm will look for backfilled unoccupied cells with elements that match.

 #container { display: grid; grid-template-columns: 240px 1fr; grid-auto-flow: dense; /* NEW */ } 

7.7. Auto Place: grid-auto-flow Property

Grid elements that are explicitly placed are automatically placed in unallocated space in the grid container by automatically placing the algorithm.

grid-auto-flow controls how the auto-layout algorithm works, precisely indicating how automatically placed elements get into the grid.

dense

If specified, the automatic placement algorithm uses a “tight” packing algorithm that attempts to fill holes earlier in the grid if smaller objects appear later. This can lead to the appearance of elements out of turn, when it will fill the holes left by larger objects.

 #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 a string for the second element.

 #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> 

Answer 2

I found out: I need to apply grid-auto-flow: dense; in container:

 #container { grid-template-columns: 240px 1fr; display: grid; grid-auto-flow: dense; } 

According to MDN , this algorithm attempts to fill holes earlier in the grid.