1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  .grid {
5
    display: block;
6
    }
7
  .box {
8
    color: white;
9
    font-size: 2vh;
10
    padding: 10px;
11
    background: yellowgreen;
12
    margin: 10px 0;
13
    text-align: center;
14
    }
15
  @media screen and (min-width: 576px) {
16
    .grid {
17
      display: grid;
18
      grid-template-rows: repeat(12, 1fr);
19
      grid-template-columns: repeat(6, 1fr);
20
      grid-auto-flow: column;
21
      grid-gap: 10px;
22
      }
23
    .box {
24
      margin: 0;
25
      }
26
    .box:nth-child(1) {
27
      grid-row: span 12;
28
      }
29
    .box:nth-child(2),
30
    .box:nth-child(3) {
31
      grid-row: span 6;
32
      }
33
    .box:nth-child(4),
34
    .box:nth-child(5),
35
    .box:nth-child(6) {
36
      grid-row: span 4;
37
      }
38
    .box:nth-child(7),
39
    .box:nth-child(8),
40
    .box:nth-child(9),
41
    .box:nth-child(10) {
42
      grid-row: span 3;
43
      }
44
    .box:nth-child(11),
45
    .box:nth-child(12),
46
    .box:nth-child(13),
47
    .box:nth-child(14),
48
    .box:nth-child(15),
49
    .box:nth-child(16) {
50
      grid-row: span 2;
51
      }
52
    }
53
</style>
54
<main class="grid">
55
  <div class="box">1</div>
56
  <div class="box">2</div>
57
  <div class="box">3</div>
58
  <div class="box">4</div>
59
  <div class="box">5</div>
60
  <div class="box">6</div>
61
  <div class="box">7</div>
62
  <div class="box">8</div>
63
  <div class="box">9</div>
64
  <div class="box">10</div>
65
  <div class="box">11</div>
66
  <div class="box">12</div>
67
  <div class="box">13</div>
68
  <div class="box">14</div>
69
  <div class="box">15</div>
70
  <div class="box">16</div>
71
  <div class="box">17</div>
72
  <div class="box">18</div>
73
  <div class="box">19</div>
74
  <div class="box">20</div>
75
  <div class="box">21</div>
76
  <div class="box">22</div>
77
  <div class="box">23</div>
78
  <div class="box">24</div>
79
  <div class="box">25</div>
80
  <div class="box">26</div>
81
  <div class="box">27</div>
82
  <div class="box">28</div>
83
</main>