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
  @media screen and (max-width: 575px) {
57
    .grid {
58
      display: block;
59
    }
60
    .box {
61
      margin: 10px 0;
62
    }
63
  }
64
</style>
65
<main class="grid">
66
  <div class="box">1</div>
67
  <div class="box">2</div>
68
  <div class="box">3</div>
69
  <div class="box">4</div>
70
  <div class="box">5</div>
71
  <div class="box">6</div>
72
  <div class="box">7</div>
73
  <div class="box">8</div>
74
  <div class="box">9</div>
75
  <div class="box">10</div>
76
  <div class="box">11</div>
77
  <div class="box">12</div>
78
  <div class="box">13</div>
79
  <div class="box">14</div>
80
  <div class="box">15</div>
81
  <div class="box">16</div>
82
  <div class="box">17</div>
83
  <div class="box">18</div>
84
  <div class="box">19</div>
85
  <div class="box">20</div>
86
  <div class="box">21</div>
87
  <div class="box">22</div>
88
</main>