How do I re-order columns with CSS grid?

Question

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>

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>

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 😢

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

How do I change the order of the columns ?

doğukan · Accepted Answer · 2021-05-20 11:18:30Z

1

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>

answered May 20, 2021 at 11:18

doğukan

28k15 gold badges67 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Temani Afif · Accepted Answer · 2021-05-20 11:25:20Z

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>

Collectives™ on Stack Overflow

How do I re-order columns with CSS grid?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related