Reverse order of columns in CSS Grid Layout

Question

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 c

Answer 1

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;
}

direction: unset

  
A
  
B


direction: rtl

  
A
  
B