1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  .grid {
5
    display: grid;
6
    grid-template-rows: repeat(12, 1fr);
7
    grid-template-columns: repeat(6, 1fr);
8
    grid-auto-flow: column;
9
    grid-gap: 10px;
10
    }
11
  .box {
12
    color: white;
13
    font-size: 2vh;
14
    padding: 10px;
15
    background: gold;
16
    margin: 0;
17
    text-align: center;
18
    }
19
  .box:nth-child(1) {
20
    grid-row: span 12;
21
    }
22
  .box:nth-child(2),
23
  .box:nth-child(3) {
24
    grid-row: span 6;
25
    }
26
  .box:nth-child(4),
27
  .box:nth-child(5),
28
  .box:nth-child(6) {
29
    grid-row: span 4;
30
    }
31
  .box:nth-child(7),
32
  .box:nth-child(8),
33
  .box:nth-child(9),
34
  .box:nth-child(10) {
35
    grid-row: span 3;
36
    }
37
  .box:nth-child(11),
38
  .box:nth-child(12),
39
  .box:nth-child(13),
40
  .box:nth-child(14),
41
  .box:nth-child(15),
42
  .box:nth-child(16) {
43
    grid-row: span 2;
44
    }
45
  @media screen and (max-width: 575px) {
46
    .grid {
47
      display: block;
48
      }
49
    .box {
50
      margin: 10px 0;
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>