1) display:grid:
2) display:grid-inline:
----CONTAINER----
1)
grid-template-rows
grid-template-columns ====> grid-template
grid-template-areas
2)
grid-row-gap
gird-column-gap ====> grid-gap
grid-gap
3)
justify-items
align-items
justify-content
align-content
4)
grid-auto-rows
grid-auto-columns
grid-auto-flow
----ITEM----
1)
grid-row-start ====> grid-row
grid-row-end
grid-column-start ====> grid-column
grid-column-end
2)
justify-self
align-self
3)
order
1 grid-template-rows
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
2 grid-template-columns
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
3 grid-row-gap:5px; | grid-column-gap:5px; | grid-gap: 20px;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
4 grid-template-rows:repeat(2, 100px); | grid-template-columns:repeat(2, 100px) 200px;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
5 grid-template-columns:repeat(2, 100px) 1fr;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
6 grid-template-columns:repeat(3, 1fr);
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
7 grid-template-columns:1fr 2fr 1fr;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
8 grid-template-columns:50% 1fr 1fr;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
9 grid-row-start:2; grid-row-end:3;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
10 grid-row-start:2; | grid-row-end:3; | grid-column-start:2; | grid-column-end:3;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
11 shortcut of 10 | grid-row:2/3; | grid-column:2/3;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
12 shortcut of 10 | grid-row:1/2; | grid-column:3/4;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
13 shortcut of 10 | grid-area: 1/3;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
14 like colspan, rowspan | grid-row: 2/2; | grid-column: 2/4;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
15 like colspan, rowspan | grid-row: 1/3; | grid-column: 3/4;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
16 like colspan, rowspan | grid-area: 1/3/3/3; | r/c/r-line/c-line
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
17 like colspan, rowspan | grid-row: 2/2; | grid-column: 2 / -1;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
18 like colspan, rowspan | grid-row: 2/2; | grid-column: 2 / span 2;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
19 like colspan, rowspan |
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
20 TYPE -1 lession 97
1 Header
2 box 1
3 box 2
4 box 3
5 sidebar
6 main content
7 footer
21 shortcut of 20 TYPE -2 lession 99
1 Header
2 box 1
3 box 2
4 box 3
5 sidebar
6 main content
7 footer
22 shortcut of 20 TYPE -2 lession 99
1 Header
2 box 1
3 box 2
4 box 3
5 sidebar
6 main content
7 footer
23 grid-auto-rows:90px;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
24 align-items: center; | align-items: end; | align-items: start; | just line d-flex
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
25 align-items: center; | justify-items: center; | justify-items: start; | justify-items: end; | just line d-flex
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
26 align-self: stretch; | justify-self: stretch; | just line d-flex
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
27 justify-content: center; | justify-content: start; | justify-content: end; | justify-content: space-between;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
28 align-content: center; | align-content: start; | align-content: end; | align-content: space-between;
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
29 max-content
1 Orange color this
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
7 color
8 color
30 min-content
1 Orange color this
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
7 color
8 color the quick brown fox jump over the lazy little dog
31 min-max | grid-template-rows:repeat(2, minmax(150px, min-content));
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
7 color
8 color the quick brown fox jump over the lazy little dog
32 min-max | grid-template-columns:minmax(200px, 50%) repeat(3, 1fr);
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
7 color
8 color
33 grid-template-columns:repeat(auto-fill, 100px);
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
7 color
8 color
34 grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
1 Orange
2 Green
3 Violet
4 Pink
5 Blue
6 Brwon
7 color
8 color