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
  padding: 7px;
13
  background: gold;
14
  text-align: center;
15
}
16
.box:nth-child(2),
17
.box:nth-child(21) {
18
  grid-column: span 11;
19
  }
20
.box:nth-child(3),
21
.box:nth-child(20) {
22
  grid-column: span 2;
23
  }
24
.box:nth-child(4),
25
.box:nth-child(19) {
26
  grid-column: span 10;
27
  }
28
.box:nth-child(5),
29
.box:nth-child(18) {
30
  grid-column: span 3;
31
  }
32
.box:nth-child(6),
33
.box:nth-child(17) {
34
  grid-column: span 9;
35
  }
36
.box:nth-child(7),
37
.box:nth-child(16) {
38
  grid-column: span 4;
39
  }
40
.box:nth-child(8),
41
.box:nth-child(15) {
42
  grid-column: span 8;
43
  }
44
.box:nth-child(9),
45
.box:nth-child(14) {
46
  grid-column: span 5;
47
  }
48
.box:nth-child(10),
49
.box:nth-child(13) {
50
  grid-column: span 7;
51
  }
52
.box:nth-child(11),
53
.box:nth-child(12) {
54
  grid-column: span 6;
55
  }
56
</style>
57
<main class="grid">
58
  <div class="box">1</div>
59
  <div class="box">2</div>
60
  <div class="box">3</div>
61
  <div class="box">4</div>
62
  <div class="box">5</div>
63
  <div class="box">6</div>
64
  <div class="box">7</div>
65
  <div class="box">8</div>
66
  <div class="box">9</div>
67
  <div class="box">10</div>
68
  <div class="box">11</div>
69
  <div class="box">12</div>
70
  <div class="box">13</div>
71
  <div class="box">14</div>
72
  <div class="box">15</div>
73
  <div class="box">16</div>
74
  <div class="box">17</div>
75
  <div class="box">18</div>
76
  <div class="box">19</div>
77
  <div class="box">20</div>
78
  <div class="box">21</div>
79
  <div class="box">22</div>
80
</main>