-
Notifications
You must be signed in to change notification settings - Fork 0
/
css grid.html
61 lines (51 loc) · 1.75 KB
/
css grid.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
<!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</title>
<style>
#container{
display: grid;
grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
/* grid-auto-columns: 1000px; */
grid-auto-rows: minmax(100px,auto);
/* minmax today */
grid-gap: 100px;
column-gap: 100px;
}
.item{
background-color: antiquewhite;
border: solid 3px rgb(117, 73, 73);
border-radius: 5px;
}
#hey{
/* continue grid-row-start and end form here with code with harry */
}
.item1{
display: grid;
grid-template-columns: repeat(3,1fr);
}
.hey2{
border: solid 3px black;
border-radius: 3px;
grid-template-columns: 10px 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">1 Lorem ipsum dolor silorem1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ipsum totam omnis sit itaque, magni necessitatibus optio enim consectetur explicabo. Excepturi est cupiditate ducimus minus natus quam mollitia ullam impedit?.</div>
<div class="item" id="hey">2</div>
<div class="item 1">
<div class="hey2">box in box</div>
<div class="hey2">box in box</div>
<div class="hey2">box in box</div>
<div class="hey2">box in box</div>
</div>
<div class="item">4</div>
</div>
</body>
</html>
<!-- wasted -->