-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathGrid2.html
84 lines (74 loc) · 2.51 KB
/
Grid2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRID Document</title>
<style>
.grid {
margin: 10px;
display: grid;
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
/* grid-auto-rows: 100px; */
grid-auto-rows: minmax(100px, auto);
}
.grid>div {
background-color: rgb(79, 125, 132);
padding: 20px;
}
.grid>div:nth-child(odd) {
background-color: aquamarine;
}
.nested {
color: rgb(28, 103, 214);
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 70px;
grid-gap: 1em;
}
.nested>div {
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div class="grid">
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis sed harum, repudiandae, quidem optio labore perspiciatis quasi ullam molestias laborum iusto fuga delectus pariatur cumque blanditiis nostrum excepturi obcaecati. Amet libero fugit
dolor exercitationem quasi fugiat dolorem quidem atque debitis.</div>
<div class="nested">
<div>Lorem </div>
<div>Lorem </div>
<div>Lorem </div>
<div>Lorem </div>
<div>Lorem </div>
<div>Lorem </div>
<div>Lorem </div>
<div>Lorem </div>
<div>Lorem </div>
<div>Lorem </div>
<div>Lorem </div>
<div>Lorem </div>
</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
</body>
</html>