CSS Сетка - альтернативный порядок элементов только на рабочем столе - PullRequest
Новая
       7

CSS Сетка - альтернативный порядок элементов только на рабочем столе

2 голосов
/ 10 апреля 2020

Я хочу создать адаптивную страницу с сеткой CSS, например, для P C: 

IMG  | Text
Text | IMG
IMG  | Text

И так для мобильных устройств: 

IMG
Text
IMG
Text
IMG
Text

Проблема в том, Я не могу обернуть каждую пару Text IMG в div. Как я могу сделать такой макет с этим шахматным заказом и без него для мобильного телефона? 

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>

1 Ответ

2 голосов
/ 10 апреля 2020

Вы можете настроить размещение, используя 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>
...