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