1
<!doctype html>
2
<title>Example</title>
3
<style>
4
#grid {
5
  display: grid;
6
  grid-template-rows: 50vh repeat(4, 1fr);
7
  grid-template-columns: repeat(4, 1fr);
8
  grid-gap: 10px;
9
  height: 100vh;
10
  margin: 0;
11
}
12
#grid > div {
13
  color: white;
14
  font-size: 4vw;
15
  padding: 10px;
16
  background: gold;
17
}
18
#grid > div:nth-child(1) {
19
  grid-column: span 4;
20
  }
21
#grid > div:nth-child(2) {
22
  grid-row: span 4;
23
  }
24
#grid > div:nth-child(4) {
25
  grid-row: span 2;
26
  }
27
#grid > div:nth-child(5) {
28
  grid-row: span 3;
29
  }
30
#grid > div:nth-child(6) {
31
  grid-row: span 3;
32
  }
33
</style>
34
<body id="grid">
35
  <div>1</div>
36
  <div>2</div>
37
  <div>3</div>
38
  <div>4</div>
39
  <div>5</div>
40
  <div>6</div>
41
  <div>7</div>
42
  <div>8</div>
43
  <div>9</div>
44
</body>