-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgrid1.html
69 lines (66 loc) · 1.62 KB
/
grid1.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
<head>
<style>
.wrapper1{
display: grid;
gap:1px;
height:40px;
background:pink;
align-items: center;
grid-template-columns: 1em;
grid-template-rows: 1em;
grid-template-areas: 'a b c'
'd e f';
}
.wrapper1 div{
background:yellow;
}
.contanier{
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2,1fr);
grid-template-rows: 300px;;
grid-template-areas:'a b c '
'd e f';
justify-content: end;
}
.contanier div{
background:red;
}
.item1{
grid-area: a
}
.item2{
grid-area: b
}
.item3{
grid-area: c
}
.item4{
grid-gap: d
}
.item5{
grid-gap: e
}
.item6{
grid-gap: f
}
</style>
</head>
<body>
<div class="contanier">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
<div class="item5">item6</div>
</div>
<div class="wrapper1">
<div class="a">item1</div>
<div class="b">item2</div>
<div class="c">item3</div>
<div class="d">item4</div>
<div class="e">item5</div>
<div class="f">item6</div>
</div>
</body>