-
Notifications
You must be signed in to change notification settings - Fork 1
/
css gird
144 lines (123 loc) · 4.45 KB
/
css gird
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
Css grid : 2 dimentional flow
----> horizontal/row
^
| Vertical/column
|
1) display: grid
2) grid-template-columns: 200px 100px; // first column would be 200px width second would be 100px width
grid-template-columns: 2fr 1fr; // first column would be double the second column
-----------------------------
| 200px | 100px |
| 2fr | 1fr |
-----------------------------
grid-template-column: repeat(4, 100px); // repeat 4 times & all columns would be 100px
----------------------------------------
| 100px | 100px | 100px | 100px |
| | | | |
----------------------------------------
3) grid-template-rows: 200px 100px; // first row would be 200px height and second row 100px
-----------------------------
| | |
| | |
| | 200px height |
| | |
-----------------------------
-----------------------------
| | 100px height |
| | |
-----------------------------
4) grid-auto-rows: 150px; // all rows will be 150px height
grid-auto-rows: minmax(150px, auto) // minimum 150px height and max infinite
5) Gap:
grid-row-gap: 15px; // gap between rows
grid-column-gap: 20px; // gap between columns
grid-gap: 10px; // similar gap on rows and columns
6) Area:
grid-template-areas: "header header"
"sidebar content"
"sidebar content"
.grid-item-1 {
grid-area: header;
}
.grid-item-2 {
grid-area: sidebar;
}
.grid-item-3 {
grid-area: content;
}
This will create below UI
-----------------------------
| |
| header |
-----------------------------
-----------------------------
| | |
| sidebar | |
| | content |
| | |
-----------------------------
-----------------------------
| | |
| | |
-----------------------------
7) grid-row-start : start row of the item , this property to be used for individual items,values 1 2 3 as per grid lines
grid-row-end : end row of the item , this property to be used for individual items
grid-row: 1 / -1 for cover entire row
--------------------
--------------------
--------------------
grid-column-start : start column of the item , this property to be used for individual items
grid-column-end : end column of the item , this property to be used for individual items
grid-column: 1 / -1 for cover entire column
| | |
| | |
| | |
to create a UI
.item-1 {
grid-column-start: 1;
grid-column-end: 3; or -1 (for covering entire column --------)
or
grid-column: 1 / -1;
}
.item-2 {
}
.item-3 {
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 4; or (-1)
}
-----------------------------
| |
| item 1 |
-----------------------------
-----------------------------
| | |
| item 2 | |
| | item 3 |
| | |
-------------| |
-------------| |
| | |
| | |
-----------------------------
using span
grid-column: span 2 // taking 2 item width
-----------------------------
| |
| |
-----------------------------
grid-row: span 2 // taking 2 item height
--------------
| |
| |
| |
| |
| |
| |
| |
| |
--------------
8) justify-content: align items horizontally (values: center, start, end, stretch(default), space-around)
9) align-content: align items vertically (values: center, start, end, stretch(default), space-around)
10) align-self: vertical align item individualy
11) justify-self: horizontally align item individualy