Search code examples
htmlcsscss-grid

How do I re-order columns with CSS grid?

How do I use CSS grid and via CSS set the order of columns.

Example of 3x3 grid using CSS grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
}
.grid>* {
  background: orange;
}
<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>

enter image description here

But, if I try to change the order of the columns using grid-column the auto-layout fails

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
  grid-template-areas: "column-1 column-2 column-3";
}
.grid>* {
  background: orange;
}

.fruit { grid-column: 3 / 4; }
.color { grid-column: 2 / 3; }
.cost { grid-column: 1 / 2; }
<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>

enter image description here

I tried using order

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
}
.grid>* {
  background: orange;
}

.fruit { order: 3; }
.color { order: 2; }
.cost { order: 1; }
<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>

The rows have become columns and the columns have become rows 😢

enter image description here

I tried a grid-template-areas like this

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
  grid-template-areas: "column-1 column-2 column-3";
}
.grid>* {
  background: orange;
}

.fruit { grid-area: column-3; }
.color { grid-area: column-2; }
.cost { grid-area: column-1; }
<div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>

That ended up squashing all the rows into one row

enter image description here

How do I change the order of the columns ?

Solution

  • Just make it grid-auto-flow: column;

    .grid {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1px;
}

.grid>* {
  background: orange;
}

.fruit {
  grid-column: 3/4;
}

.color {
  grid-column: 2/3;
}

.cost {
  grid-column: 1/2;
}
    <div class="grid">
  <div class="fruit">Apple</div>
  <div class="color">Red</div>
  <div class="cost">$1.00</div>
  <div class="fruit">Banana</div>
  <div class="color">Yellow</div>
  <div class="cost">$1.20</div>
  <div class="fruit">Lime</div>
  <div class="color">Green</div>
  <div class="cost">$0.75</div>
</div>