Reverse order of columns in CSS Grid Layout

css grid-row-reverse
css grid order
css reverse order
css grid-column break
css grid columns overlapping
css grid independent columns
css grid infinite columns
css grid skip column

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>

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

Grid 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, content re-ordering and accessibility, In most layout situations, the visual order will match that DOM order. ol { display​: flex; flex-direction: row-reverse; } things: the order property, flowing items into columns instead of rows, and positioning items specifically in  CSS grid - reverse order column/rows, its possible? [duplicate] Ask Question Asked 1 year, 9 months ago. im playing with css 3 grid and i have one question. I

While the above solutions work for this specific example, it isn't the proper way to solve your question. There is a CSS property that Grid Layout adheres to called direction. direction: rtl will give you what the question calls for. It is supported by all browsers that support Grid Layout.

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

#container.reverse {
  direction: rtl;
}

.a {
  background: yellow;
}

.b {
  background: blue;
  color: white;
}
<h3>direction: unset</h3>
<div id="container">
  <div class="a">A</div>
  <div class="b">B</div>
</div>

<h3>direction: rtl</h3>
<div id="container" class="reverse">
  <div class="a">A</div>
  <div class="b">B</div>
</div>

Reverse order of columns in CSS Grid Layout, 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). The remaining styles will be determined by whichever CSS method we use to reverse the buttons’ order. Lastly, we’ll add a few styles for the focus state of our buttons: So, if we use the keyboard (“Tab” key) to navigate through the buttons, each of the focused buttons will get a dark red as background color.

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.

Reverse grid order · Issue #630 · pure-css/pure · GitHub, That way the developer can reverse the order for single-column or multi-column versions of the layout. I think media queries would be an  You can use negative numbers to reference grid lines in reverse order so the last grid line is -1, the second to last is -2, third to last -3, etc. So we can always reference the last grid line with -1. So the following does the same as our current code:.grid-item-1 { grid-column-start: 1; grid-column-end: -1; }

CSS Grid - how to invert rows and columns? - Layout, With CSS grid, Is it possible to invert rows and columns at a breakpoint? For example, I have a grid of 10 columns (width = 10vw) and 5 rows  Depending upon whether you'd like the elements to display vertically or horizontally, you'll change the value of flex-direction  to reverse the order of elements: row-reverse  displays the elements in reverse order horizontally, while column-reverse  displays the elements in reverse order vertically.

A Few Different CSS Methods for Changing Display Order, Our biggest challenge is to find a way to reverse the buttons' order. Flexbox is another way for changing the column ordering. In our example A promising solution for rearranging elements is the CSS Grid Layout. Even if it  The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. The values are a space separated list, where each value specifies the size of the respective column.

Using CSS `grid` (order) for Column Ordering, the CSS Grid Item Placement Algorithm - Visualized. Being skilled with Grid layout takes a lot more than just memorizing syntax. Order takes a backseat to row start/end positioning (or column start/end positioning in a column flowing Grid). Reverse the display of the items. the flex-direction property can take one of four values: row; column; row-reverse; column-reverse; The first two values keep the items in the same order that they appear in the document source order and display them sequentially from the start line.

Comments
  • But, that would also change the natural flow direction of any text of other components inside of those containers. I only want to change the apparent order of the containers, not change the text direction. (direction: rtl supports right-to-left languages).
  • That's a fair point. Could you not simply add > * { direction: ltr} for the children?
  • @JasonTFeatheringham yes, exactly (about the > * { direction: ltr })
  • CSS direction is an internationalisation feature and not intended for other purposes. While this works, it's not the intended purpose of direction, requires extra steps to fix the text (as the above comments point out) and it's unclear what you're doing.