This repository has been archived by the owner on Dec 12, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
grid.css
96 lines (67 loc) · 2.31 KB
/
grid.css
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
.grid-container {
display: grid;
grid-template-columns: 40% 30% 30%;
grid-gap: 1em;
/* grid-template-columns: 70% 30%; the width of our colomuns ( the div elements ) , since this is a grid no matter how much w add divs it they will all follow this 70% 30% */
/* grid-column-gap: 1em; grid-row-gap: 1em; */
}
.grid-container-2 {
display: grid;
grid-template-columns: repeat(1, 3fr 2fr 1fr);
grid-gap: 1em;
grid-auto-rows: minmax(100px, auto);
/* grid-template-columns: 1fr 2fr 1fr; is better and responsive in grid -> fractions */
/* grid-template-columns: repeat(4, 1fr 2fr); repeat 4 times 1fr 2fr */
/* grid-auto-rows: 100px; a height of a grid row */
/* if the grid has a row-content that is bigger then a 100px height then it will justify it and all the rows that are heigher then a 100px */
}
.grid-container-3 {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
justify-content: stretch;
align-items: stretch;
/*justify-content : start , end , center , stretch -> for horizental */
/*align-items : for vertical */
}
.nasted { /* sub grid */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 70px;
grid-gap: 1em;
}
.box1 { align-self: start; /* align horizentaly only this div */ }
.box2 { align-self: end; grid-column: 1/3; grid-row:3; }
.box3 { align-self: center; justify-self: end; /* align verticaly only this div */ }
.box4 { align-self: stretch; grid-column: 3; grid-row:1/4; }
.grid-container > div,.grid-container-2 > div, .grid-container-3 > div {
/* all the divs in the grid-container*/
background: #eee;
padding: 1em;
}
.grid-container>div:nth-child(odd), .grid-container-2>div:nth-child(odd), .grid-container-3>div:nth-child(odd) {
/* every other div in the container every odd element */
background: #ddd;
}
.nasted > div { border: 1px solid red; padding: 1em; }
/*
display: grid;
grid-template-columns: repeat(1, 3fr 2fr 1fr);
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: 40% 30% 30%;
grid-gap: 1em;
grid-row-gap: 1em; grid-column-gap: 1em;
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: 100px;
justify-content: stretch;
align-items: stretch;
align-self: center;
justify-self: end;
grid-column:1/3
grid-row:4
grid-template-columns: 1fr repeat(2,minmax(auto,25em)) 1fr;
columns: 2;
column-gap: 2em;
grid-column: span 2;
*/