CSS Grid - alternate order of elements only on Desktop

Question

I want to make an adaptive page with CSS grid like this for PC:

IMG  | Text
Text | IMG
IMG  | Text

And like this for mobile:

IMG
Text
IMG
Text
IMG
Text

The problem is I can not wrap each pair Text IMG to a div. How can I make such layout with that chess order and without it for mobile?

img {
      max-width: 100%;
   }
   .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
   }

   @media screen (max-width: 540px) {
      .grid {
         grid-template-columns: 1fr;
      }
   }

<div class="grid">
   <div class="info">
      <h2>Lorem, ipsum.</h2>
      <p>Lorem ipsum dolor sit amet.</p>
      <button>Lorem.</button>
   </div>
   <div class="img">
      <img src="https://via.placeholder.com/350x150" alt="">
   </div>

   <div class="info">
      <h2>Lorem, ipsum.</h2>
      <p>Lorem ipsum dolor sit amet.</p>
      <button>Lorem.</button>
   </div>
   <div class="img">
      <img src="https://via.placeholder.com/350x150" alt="">
   </div>

   <div class="info">
      <h2>Lorem, ipsum.</h2>
      <p>Lorem ipsum dolor sit amet.</p>
      <button>Lorem.</button>
   </div>
   <div class="img">
      <img src="https://via.placeholder.com/350x150" alt="">
   </div>
</div>

Temani Afif · Accepted Answer · 2020-04-10T13:57:54.390

You can adjust the placement using grid-column:

img {
  max-width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow:dense; /* Don't forget this to fill all the tracks */
}
/* you pattern repeat each 4 elements */
.img:nth-child(4n + 2) { 
  grid-column:1;
}
.info:nth-child(4n + 1) {
  grid-column:2;
}
/**/

@media screen and (max-width: 540px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .info:nth-child(4n + 1) {
    grid-column:1;
  }
}

<div class="grid">
  <div class="info">
    <h2>Lorem, ipsum.</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <button>Lorem.</button>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/350x150" alt="">
  </div>

  <div class="info">
    <h2>Lorem, ipsum.</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <button>Lorem.</button>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/350x150" alt="">
  </div>

  <div class="info">
    <h2>Lorem, ipsum.</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <button>Lorem.</button>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/350x150" alt="">
  </div>
  <div class="info">
    <h2>Lorem, ipsum.</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <button>Lorem.</button>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/350x150" alt="">
  </div>
  <div class="info">
    <h2>Lorem, ipsum.</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <button>Lorem.</button>
  </div>
  <div class="img">
    <img src="https://via.placeholder.com/350x150" alt="">
  </div>
</div>

It works perfectly, thanks. Could you tell me why it's not run well with grid-template-areas? I have updated code snippet with it. — user3055346, Apr 10 '20 at 14:22
@user3055346 you tempalte area is invalid. You cannot have non-squared area. Actually your are defining the `text` area a a diagonal and this won't work — Temani Afif, Apr 10 '20 at 14:24
@user3055346 Grids must be rectangular as Temani mentioned; you can read [the spec](https://www.w3.org/TR/css-grid-1/#intro) for more information on that. — TylerH, Apr 10 '20 at 16:03

CSS Grid - alternate order of elements only on Desktop

1 Answers1