-
Notifications
You must be signed in to change notification settings - Fork 0
/
index2.html
76 lines (72 loc) · 2.28 KB
/
index2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Grid</title>
<style>
.wrapper{
display: grid;
/* grid-template-columns: 1fr 2fr 1fr;*/
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
/* grid-auto-rows: 100px;*/
grid-auto-rows: minmax(100px, auto);
}
.nested{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 70px;
grid-gap: 1em;
}
.wrapper > div{
background: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd){
background: #ddd;
}
.nested > div {
border: #333 1px solid;
padding: 1em;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
Lorem ipsum dolor sit.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempore dolorum amet sunt dolorem iusto rem, velit
tenetur temporibus doloribus, voluptatibus illo deleniti? Cum animi consequatur laboriosam, quod alias delectus exercitationem inventore aliquid ipsam incidunt
perspiciatis, fugit, voluptate dicta iure harum.
</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>
<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>