JSFiddle - React, Tailwind, and code Playground

Display grid и contents

by Ankhena

HTML

<div class="block">
  <div class="wrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="wrap">
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
  <div class="wrap">
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
  </div>
  <div class="wrap">
    <div class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
  </div>
  <div class="wrap">
    <div class="item">17</div>
    <div class="item">18</div>
    <div class="item">19</div>
    <div class="item">20</div>
  </div>
  <div class="wrap">
    <div class="item">21</div>
    <div class="item">22</div>
    <div class="item">23</div>
    <div class="item">24</div>
  </div>
  <div class="wrap">
    <div class="item">25</div>
    <div class="item">26</div>
    <div class="item">27</div>
    <div class="item">28</div>
  </div>
    <div class="wrap">
    <div class="item">29</div>
    <div class="item">30</div>
    <div class="item">31</div>
    <div class="item">32</div>
  </div>


</div>
<p>Для https://qna.habr.com/q/972077</p>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Neucha', cursive;
}

.block {
  max-width: 500px;
  margin: 0 auto;
}

.wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 20px;
  gap: 15px;
  margin-bottom: 15px;
}

.item {
  background: #a3e2a3;
}

.item:nth-child(odd) {
  grid-row: span 2;
}

.item:nth-child(even) {
  grid-row: span 3;
}

.item:nth-child(4n-1) {
  order: 1;
}


@media (min-width: 600px) {
  .block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 20px;
    grid-auto-flow: row dense;
    gap: 15px;
  }

  .wrap {
    display: contents;
    margin-bottom: 0;
  }

  .wrap:nth-child(3n-1) .item:nth-child(1) {
    grid-column: 2/3;
  }

  .wrap:nth-child(3n) .item:nth-child(3) {
    grid-column: 2/3;
  }


  .item:nth-child(4n-1) {
    order: 0;
  }

}