How do I re-order columns with CSS grid?

user_13667392 0
Viewed 59

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 ?

css-grid css html
2 Answers

Simply like below:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow:dense; /* don't forget this */
  grid-gap: 1px;
}
.grid>* {
  background: orange;
}

/* adjust the grid-column value like you want */
.grid *:nth-child(3n + 1) { /*OR .fruit */
  grid-column:2;
}
.grid *:nth-child(3n + 2) { /*OR .color */
  grid-column:3;
}
.grid *:nth-child(3n + 3) { /*OR .cost */
  grid-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>

You can also simplify like below. You only specify the position of two columns and the third one will be set automatically

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow:dense; 
  grid-gap: 1px;
}
.grid>* {
  background: orange;
}


.grid *:nth-child(3n + 1) { 
  grid-column:2;
}
.grid *:nth-child(3n + 2) { 
  grid-column:3;
}
<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>

user_86203330

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>

user_106987410
Related