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