-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
53 lines (50 loc) · 2.59 KB
/
index.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
<!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 Grids</title>
<style>
.wrapper{
display: grid;
grid-template-columns: 70% 30%;
/*grid-column-gap: 1em;
grid-row-gap: 1em;*/
grid-gap: 1em;
}
.wrapper > div{
background: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd){
background: #ddd;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Optio, omnis. Est soluta
tempora praesentium ipsa velit debitis, in
recusandae atque nisi nam quia eius a ad,
culpa exercitationem, quasi mollitia eum.
Illum, minus, optio officia quia adipisci porro similique sint aliquam quas accusamus id delectus nostrum consequatur doloribus hic laudantium debitis? Consequatur illum vero natus aperiam? Sed consequuntur, eos magni voluptas voluptatum similique cumque! Consectetur sunt, modi optio facilis architecto tempora aspernatur nostrum tenetur
deleniti alias ullam fuga odio voluptate?
</div>
<div>
Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Veniam nisi sequi perferendis
consequuntur ipsam ipsum laudantium quisquam commodi accusamus libero dolorum adipisci placeat illo, exercitationem et totam! Eius, earum dicta!
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, omnis. Est soluta tempora praesentium ipsa velit debitis, in recusandae atque nisi nam quia eius a ad, culpa exercitationem, quasi mollitia eum. Illum, minus, optio officia quia adipisci porro similique sint aliquam quas accusamus id delectus nostrum consequatur doloribus hic laudantium debitis? Consequatur illum vero natus aperiam? Sed consequuntur, eos magni voluptas voluptatum similique cumque! Consectetur sunt, modi optio facilis architecto tempora aspernatur nostrum tenetur
deleniti alias ullam fuga odio voluptate?
</div>
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam nisi sequi perferendis consequuntur ipsam ipsum laudantium quisquam commodi accusamus libero dolorum adipisci placeat illo, exercitationem et totam! Eius, earum dicta!
</div>
</div>
</body>
</html>