-
Notifications
You must be signed in to change notification settings - Fork 0
/
9.2_Grids.html
119 lines (96 loc) · 3.41 KB
/
9.2_Grids.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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>CSS Grids</title>
<style>
#container1 {
display: grid;
border: 2px solid rgb(255, 160, 160);
/* grid-template-columns (GTC) STARTS*/
grid-template-columns: 5fr 4fr 8fr 3fr;
/* grid-template-columns - in 'fr' */
/* grid-template-columns: 300px 500px 200px; */
/* grid-template-columns - in 'px'; */
/* we can use value- 'auto' for GTC for any of ONE column */
/* ******** grid-template-columns: repeat(4, 2fr);
grid-template-columns: repeat(No.of Iteration, Grid-gap); ********** */
grid-gap: 1rem;
/* Grid Gap Property */
/* grid-row-gap: ; */
/* grid-column-gap: ; */
/* grid-template-columns (GTC) ENDS*/
/* grid-template-rows (GTR) STARTS */
grid-template-rows: 4fr 6fr 2fr;
/* grid-template-rows: in 'fr'; */
/* grid-template-rows: 200px 400px; */
/* grid-template-rows: in 'px'; */
}
.item {
/* height: 200px;
width: 200px; */
margin: 5px;
padding: 5px;
border: 2px solid rgb(127, 193, 255);
background-color: rgb(211, 255, 211);
}
/*Spanning multiple Rows and Columns */
#container2{
margin-top: 20px;
border: 2px solid rgb(255, 160, 160);
display: grid;
grid-template-columns: 3fr 5fr 8fr;
grid-template-rows: 8fr 5fr 3fr;
}
.box{
border: 2px solid rgb(160, 221, 173);
background-color: rgb(238, 212, 238);
margin: 5px;
}
.box:first-child{
grid-column-start: 1;
grid-column-end: 3;
}
.box:nth-child(4){
grid-column-start: 1;
grid-column-end: 3;
}
/* .box:nth-child(6){
grid-row-start: 3;
grid-row-end: 5;
} */
</style>
</head>
<body>
<div id="container1">
<div class="item">This is item-1</div>
<div class="item">This is item-2</div>
<div class="item">This is item-3</div>
<div class="item">This is item-4</div>
<div class="item">This is item-5</div>
<div class="item">This is item-6</div>
<div class="item">This is item-7</div>
<div class="item">This is item-8</div>
<div class="item">This is item-9</div>
<div class="item">This is item-10</div>
<div class="item">This is item-11</div>
<div class="item">This is item-12</div>
</div>
<div id="container2">
<div class="box">This is box-1</div>
<div class="box">This is box-2</div>
<div class="box">This is box-3</div>
<div class="box">This is box-4</div>
<div class="box">This is box-5</div>
<div class="box">This is box-6</div>
<div class="box">This is box-7</div>
<div class="box">This is box-8</div>
<div class="box">This is box-9</div>
<div class="box">This is box-10</div>
<div class="box">This is box-11</div>
<div class="box">This is box-12</div>
</div>
</body>
</html>