Reverse Order of Columns in CSS Grid Layout

Reverse order of columns in CSS Grid Layout

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>

How to reverse the css grid columns order?

Simply adjust grid-column and conisder 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>

Reverse order of columns in CSS grid

To achieve this you have to add one parent class to your section like in my example i have taken grid-row.

Now when you want to change the order of the grid element you must need display: grid; which you already have it in your .grid-container class.

So now we have to set which element you want to show case first in my example i have change the order of title to second with help of grid-row property.

Check the snippet from the output.

.about_img {  display: block;  width: 100%;  height: auto;  border-radius: 0.25rem;}
.grid-container {  max-width: 90vw;  margin: 2rem auto;  display: grid;  grid-row-gap: 2rem;}.about-container.grid-row .title {  grid-row: 2;}
@media screen and (min-width:768px) {  .grid-container {    display: grid;    grid-template-columns: 1fr 1fr;    grid-column-gap: 4rem;  }}
.grid-container {  max-width: 75vw;}
.section-title {  padding: 1rem 0.5rem;}
.title_name {  font-size: 3rem;  text-transform: capitalize;}
.title_underline {  text-align: left;  background: #F4D06F;  width: 5rem;  height: 0.25rem;}
.title_text {  letter-spacing: .1rem;  line-height: 1.5;  margin-top: 1rem;  color: grey;}
.about-container {  display: grid;  grid-template-columns: 100%;  grid-template-rows: auto 1fr;  grid-gap: 2rem;}
.about_img {  border-radius: 0.25rem;}

<section class="about">  <div class="grid-container">    <article class="about-container">      <div class="title">        <h1 class="title_name">our story</h1>        <div class="title_underline"></div>        <p class="title_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis et, doloremque blanditiis tempora deserunt repudiandae! Reprehenderit amet reiciendis recusandae odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi voluptatem          fugiat provident labore animi quidem beatae molestiae voluptates officia odit mollitia</p>      </div>      <div class="about_image">        <img src="https://dummyimage.com/600x400/000/fff" class="about__img" alt="about-img">      </div>    </article>    <!--about column 1-->
    <article class="about-container grid-row">      <div class="title">        <h1 class="title_name">our story</h1>        <div class="title_underline"></div>        <p class="title_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis et, doloremque blanditiis tempora deserunt repudiandae! Reprehenderit amet reiciendis recusandae odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi voluptatem          fugiat provident labore animi quidem beatae molestiae voluptates officia odit mollitia</p>      </div>      <div class="about_image">        <img src="https://dummyimage.com/600x400/000/fff" class="about__img about_img-flip" alt="about-img">      </div>    </article>  </div>  <!--grid container--></section>

Achieving flexbox row-reverse in css grid

You have 2 elements so simply change the order of one element.

.container {  width: 500px;  max-width: 100%;  margin: 0 auto;}
.grid {  display: grid;  grid-template-columns: repeat(2, 1fr); }
.col {  padding: 24px;}
img {  height: auto;  max-width: 100%;}
.grid:nth-child(even) .col:last-child {  order:-1;}

<div class="container">
  <div class="grid">
    <div class="col">      <h2>I'm A Title</h2>      <p>Here's some copy.</p>    </div>
    <div class="col">      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">    </div>
  </div><!-- .grid -->
  <div class="grid">
    <div class="col">      <h2>I'm A Title</h2>      <p>Here's some copy.</p>    </div>
    <div class="col">      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">    </div>
  </div><!-- .grid -->
   <div class="grid">
    <div class="col">      <h2>I'm A Title</h2>      <p>Here's some copy.</p>    </div>
    <div class="col">      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">    </div>
  </div><!-- .grid -->
</div><!-- .container -->

Change the column order in a css grid

Grid Layout provides multiple methods for re-arranging grid items. I've listed four below.

The grid-template-areas property
Line-based placement
The order property
The dense function of the grid-auto-flow property. (Possibly the simplest, easiest and most robust solution for this type of layout, as it works for any number of grid items.)

Here's the original layout:

grid-container {  display: grid;  grid-template-columns: 15% 1fr 25%;  grid-auto-rows: 50px; /* for demo */  grid-gap: 10px;}
/* non-essential decorative styles */grid-item {  border: 1px solid gray;  background-color: lightgreen;  display: flex;  align-items: center;  justify-content: center;}grid-item:nth-child(2) {  background-color: orange;}

<grid-container>  <grid-item>1</grid-item>  <grid-item>2</grid-item>  <grid-item>3</grid-item></grid-container>

Can two grid-columns have reverse auto-rows order in a flexible grid?

You start with just 3fr rows then use an nth-child formula to tell which items to span 2 rows.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 3fr;
  grid-gap: 5px;
  max-width: 60%;
  margin: 0 auto;
}

.grid-item {
  background-color: lightblue;
  padding: 10px;
}

.grid-container :nth-child(4n-2),
.grid-container :nth-child(4n-1) {
  grid-row: span 2
}

<div class="grid-container">

  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>

</div>

Re-ordering grid items

You can use grid-template-areas and a media query to make it work.

jsFiddle demo

.row {  display: grid;  grid-template-areas: " a1 b1 "                        " a2 b2 ";}
@media ( max-width: 500px) {  .row { grid-template-areas: " b1" "b2" "a1" "a2" ;}}
.row> :nth-child(1) { grid-area: a1; }.row> :nth-child(2) { grid-area: a2; }.row> :nth-child(3) { grid-area: b1; }.row> :nth-child(4) { grid-area: b2; }
/* just decorative styles */.row {  grid-gap: 5px;  grid-auto-rows: 50px;}.column {  border: 1px solid black;  display: flex;  align-items: center;  justify-content: center;  background-color: lightgreen;}

<div class="row">  <div class="column">A1</div>  <div class="column">A2</div>  <div class="column">B1</div>  <div class="column">B2</div></div>