x
1
2
<html>
3
<head>
4
<style>
5
.one {
6
grid-area: one;
7
}
8
9
.grid-container {
10
display: grid;
11
grid-template:
12
'one one one . .'
13
'one one one . .';
14
grid-gap: 10px;
15
background-color: #2196F3;
16
padding: 10px;
17
}
18
19
.grid-container > div {
20
background-color: rgba(255, 255, 255, 0.8);
21
text-align: center;
22
padding: 20px 0;
23
font-size: 30px;
24
}
25
</style>
26
</head>
27
28
<div class="grid-container">
29
<div class="item one">1</div>
30
<div class="item">2</div>
31
<div class="item">3</div>
32
<div class="item">4</div>
33
<div class="item">5</div>
34
<div class="item">6</div>
35
<div class="item">7</div>
36
<div class="item">8</div>
37
<div class="item">9</div>
38
<div class="item">10</div>
39
<div class="item">11</div>
40
<div class="item">12</div>
41
</div>
42
43
</body>
44
</html>