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