Skip to content

Commit cb3123c

Browse files
javifernandezjavifernandez
committed
Content Distribution examples.
1 parent 3d61394 commit cb3123c

10 files changed

+953
-1
lines changed

‎content-distribution-changes.html

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link href="css/grid.css" rel="stylesheet">
5+
<style>
6+
.grid {
7+
grid-auto-columns: 20px;
8+
-webkit-grid-auto-columns: 20px;
9+
-ms-grid-auto-columns: 20px;
10+
grid-auto-rows: 40px;
11+
-webkit-grid-auto-rows: 40px;
12+
-ms-grid-auto-rows: 40px;
13+
grid-template-areas: "a a b"
14+
"c d b";
15+
-webkit-grid-template-areas: "a a b"
16+
"c d b";
17+
-ms-grid-template-areas: "a a b"
18+
"c d b";
19+
width: 300px;
20+
height: 200px;
21+
}
22+
23+
.containerGrid {
24+
display: grid;
25+
display: -webkit-grid;
26+
display: -ms-grid;
27+
grid-template-areas: "c1 c1 c1"
28+
"c2 c3 c3";
29+
-webkit-grid-template-areas: "c1 c1 c1"
30+
"c2 c3 c3";
31+
-ms-grid-template-areas: "c1 c1 c1"
32+
"c2 c3 c3";
33+
grid-auto-columns: auto;
34+
grid-auto-rows: auto;
35+
}
36+
37+
.container {
38+
margin: 10px;
39+
}
40+
41+
.c1 {
42+
grid-area: c1;
43+
-webkit-grid-area: c1;
44+
-ms-grid-area: c1;
45+
}
46+
.c2 {
47+
grid-area: c2;
48+
-webkit-grid-area: c2;
49+
-ms-grid-area: c2;
50+
}
51+
.c3 {
52+
grid-area: c3;
53+
-webkit-grid-area: c3;
54+
-ms-grid-area: c3;
55+
}
56+
57+
.a {
58+
grid-area: a;
59+
-webkit-grid-area: a;
60+
-ms-grid-area: a;
61+
}
62+
.b {
63+
grid-area: b;
64+
-webkit-grid-area: b;
65+
-ms-grid-area: b;
66+
}
67+
.c {
68+
grid-area: c;
69+
-webkit-grid-area: c;
70+
-ms-grid-area: c;
71+
}
72+
.d {
73+
grid-area: d;
74+
-webkit-grid-area: d;
75+
-ms-grid-area: d;
76+
}
77+
78+
.stretchedColumnGrid {
79+
grid-auto-columns: auto;
80+
-webkit-grid-auto-columns: auto;
81+
-ms-grid-auto-columns: auto;
82+
}
83+
84+
.stretchedRowGrid {
85+
grid-auto-rows: auto;
86+
-webkit-grid-auto-rows: auto;
87+
-ms-grid-auto-rows: auto;
88+
}
89+
90+
.spaceBetween {
91+
justify-content: space-between;
92+
align-content: space-between;
93+
}
94+
.spaceAround {
95+
justify-content: space-around;
96+
align-content: space-around;
97+
}
98+
.spaceEvenly {
99+
justify-content: space-evenly;
100+
align-content: space-evenly;
101+
}
102+
.stretch {
103+
justify-content: stretch;
104+
align-content: stretch;
105+
}
106+
</style>
107+
<script>
108+
function change_justify_position(obj) {
109+
var grid = document.getElementById("grid");
110+
111+
if (obj.value == "stretch")
112+
grid.classList.add("stretchedColumnGrid");
113+
else
114+
grid.classList.remove("stretchedColumnGrid");
115+
116+
grid.style.justifyContent=obj.value;
117+
}
118+
function change_align_position(obj) {
119+
var grid = document.getElementById("grid");
120+
121+
if (obj.value == "stretch")
122+
grid.classList.add("stretchedRowGrid");
123+
else
124+
grid.classList.remove("stretchedRowGrid");
125+
126+
grid.style.alignContent=obj.value;
127+
}
128+
</script>
129+
</head>
130+
<body>
131+
<div class="containerGrid">
132+
<div class="container c1">
133+
<div>
134+
<label><b>justify-content:</b></label>
135+
</div>
136+
<div>
137+
<label><input type="radio" name="justify-content" onclick="change_justify_position(this)" value="space-around">space-around</label>
138+
<label><input type="radio" name="justify-content" onclick="change_justify_position(this)" value="space-between">space-between</label>
139+
<label><input type="radio" name="justify-content" onclick="change_justify_position(this)" value="space-evenly">space-evenly</label>
140+
<label><input type="radio" name="justify-content" onclick="change_justify_position(this)" value="stretch">stretch</label>
141+
<label><input type="radio" name="justify-content" onclick="change_justify_position(this)" value="start">start</label>
142+
<label><input type="radio" name="justify-content" onclick="change_justify_position(this)" value="end">end</label>
143+
<label><input type="radio" name="justify-content" onclick="change_justify_position(this)" value="center">center</label>
144+
</div>
145+
</div>
146+
<div class="container c2">
147+
<div><label><b>align-content:</b></label></div>
148+
<div><label><input type="radio" name="align-content" onclick="change_align_position(this)" value="space-around">space-around</label></div>
149+
<div><label><input type="radio" name="align-content" onclick="change_align_position(this)" value="space-between">space-between</label></div>
150+
<div><label><input type="radio" name="align-content" onclick="change_align_position(this)" value="space-evenly">space-evenly</label></div>
151+
<div><label><input type="radio" name="align-content" onclick="change_align_position(this)" value="stretch">stretch</label></div>
152+
<div><label><input type="radio" name="align-content" onclick="change_align_position(this)" value="start">start</label></div>
153+
<div><label><input type="radio" name="align-content" onclick="change_align_position(this)" value="end">end</label></div>
154+
<div><label><input type="radio" name="align-content" onclick="change_align_position(this)" value="center">center</label></div>
155+
</div>
156+
<div class="container c3">
157+
<div id="grid" class="grid">
158+
<div class="a"></div>
159+
<div class="b"></div>
160+
<div class="c"></div>
161+
<div class="d"></div>
162+
</div>
163+
</div>
164+
</div>
165+
</body>
166+
</html>

‎content-distribution-changes.png

24.1 KB
Loading

0 commit comments

Comments
 (0)