CSS Grid: Switch two specific columns order

Question

I would like to switch the 3rd and 4th column of my grid on desktop.

I know that I could assign grid-order to each item or use a own row for two of the divs and then set the order, but I would like to avoid both to reduce code.

Is there any way to achieve this with css-grid? I am open for solutions via css-flex, if that would be easier.

My current code looks like this:

.row{
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 1200px) {
  .row{
    grid-template-columns: 1fr 1fr
  }
}

.row div{border:1px solid black}

  <div class="row">
      <div>[IMG]</div>
      <div>Text</div>
      <div>[IMG]</div>
      <div>Text</div>
      <div>[IMG]</div>
      <div>Text</div>
  </div>

Does this answer your question? stackoverflow.com/questions/45367864/… — isherwood
– isherwood, Commented Mar 24, 2021 at 14:57

doğukan · Accepted Answer · 2021-03-24 14:55:38Z

2

You can use order property with a flex or grid container. If you don't want to use order, you can play with grid-column and grid-row like below.

.row {
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 1200px) {
  .row {
    grid-template-columns: 1fr 1fr
  }
  .row>div:nth-child(3) {
    grid-column: 2 / 3;
  }
  .row>div:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
}

.row div {
  border: 1px solid black
}

<div class="row">
  <div>[IMG]</div>
  <div>Text</div>
  <div style="background: red">[IMG]</div>
  <div style="background: yellow">Text</div>
  <div>[IMG]</div>
  <div>Text</div>
</div>

answered Mar 24, 2021 at 14:55

doğukan

28k15 gold badges67 silver badges79 bronze badges

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

1 Comment

Michael Walter Over a year ago

Thank you very much. Works like a charm. I need to wait a bit longer to accept the answer :)

Temani Afif · Accepted Answer · 2021-03-24 15:11:32Z

0

You can simply do like below

.row{
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow:dense;
}

@media screen and (min-width: 1200px) {
  .row div:nth-child(3) {
     grid-column:2;
  }
}

.row div{border:1px solid black}

<div class="row">
      <div>[IMG]</div>
      <div>Text</div>
      <div>[IMG]</div>
      <div>Text</div>
      <div>[IMG]</div>
      <div>Text</div>
  </div>

answered Mar 24, 2021 at 15:11

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Collectives™ on Stack Overflow

CSS Grid: Switch two specific columns order

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related