Skip to content

Commit ca07b01

Browse files
mregomrego
committed
Another alignment demo
1 parent d706b05 commit ca07b01

File tree

4 files changed

+295
-1
lines changed

4 files changed

+295
-1
lines changed

‎demo-alignment-lines.svg

Lines changed: 32 additions & 0 deletions
Loading

‎demo-alignment.html

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<!DOCTYPE html>
2+
3+
<link href="css/bootstrap.min.css" rel="stylesheet">
4+
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
5+
<link href="css/font-awesome.min.css" rel="stylesheet">
6+
7+
<style>
8+
9+
.grid {
10+
display: grid;
11+
grid: 300px 300px 300px 300px 300px / 200px 200px 200px;
12+
grid-auto-columns: 200px;
13+
grid-auto-rows: 100px;
14+
grid-gap: 10px;
15+
margin: 50px;
16+
position: absolute;
17+
font-family: monospace;
18+
font-weight: bold;
19+
font-size: 25px;
20+
}
21+
22+
img {
23+
position: absolute;
24+
top: 110px;
25+
left: 210px;
26+
}
27+
28+
h1 {
29+
position: absolute;
30+
top: 10px;
31+
left: 675px;
32+
text-transform: uppercase;
33+
font-size: 45px;
34+
font-weight: bold;
35+
}
36+
37+
.grid > .item {
38+
border-radius: 10px;
39+
box-sizing: border-box;
40+
padding: 10px;
41+
}
42+
43+
.grid > .item:nth-child(1), .grid > .item:nth-child(11) {
44+
background: rgba(242,46,138, 0.8);
45+
border: 5px solid rgb(242,46,138);
46+
}
47+
48+
.grid > .item:nth-child(2), .grid > .item:nth-child(12) {
49+
background: rgba(98,205,217, 0.8);
50+
border: 5px solid rgb(98,205,217);
51+
}
52+
53+
.grid > .item:nth-child(3), .grid > .item:nth-child(13) {
54+
background: rgba(117,191,6, 0.8);
55+
border: 5px solid rgb(117,191,6);
56+
}
57+
58+
.grid > .item:nth-child(4), .grid > .item:nth-child(14) {
59+
background: rgba(242,226,5, 0.8);
60+
border: 5px solid rgb(242,226,5);
61+
}
62+
63+
.grid > .item:nth-child(5), .grid > .item:nth-child(15) {
64+
background: rgba(242,54,12, 0.8);
65+
border: 5px solid rgb(242,54,12);
66+
}
67+
68+
.grid > .item:nth-child(6) {
69+
background: rgba(166,0,62, 0.8);
70+
border: 5px solid rgb(166,0,62);
71+
}
72+
73+
74+
.grid > .item:nth-child(7) {
75+
background: rgba(22,129,141, 0.8);
76+
border: 5px solid rgb(22,129,141);
77+
}
78+
79+
.grid > .item:nth-child(8) {
80+
background: rgba(41,115,0, 0.8);
81+
border: 5px solid rgb(41,115,0);
82+
}
83+
84+
.grid > .item:nth-child(9) {
85+
background: rgba(166,150,0, 0.8);
86+
border: 5px solid rgb(166,150,0);
87+
}
88+
89+
.grid > .item:nth-child(10) {
90+
background: rgba(166,0,0, 0.8);
91+
border: 5px solid rgb(166,0,0);
92+
}
93+
94+
.row1 {
95+
grid-row: 1;
96+
}
97+
98+
.row2 {
99+
grid-row: 2;
100+
}
101+
102+
.row3 {
103+
grid-row: 3;
104+
}
105+
106+
.row4 {
107+
grid-row: 4;
108+
}
109+
110+
.col1 {
111+
grid-column: 1;
112+
}
113+
114+
.col2 {
115+
grid-column: 2;
116+
}
117+
118+
.col3 {
119+
grid-column: 3;
120+
}
121+
122+
.col4 {
123+
grid-column: 4;
124+
}
125+
126+
.col5 {
127+
grid-column: 5;
128+
}
129+
130+
.align-buttons i {
131+
transform: rotate(90deg);
132+
}
133+
134+
.align-buttons {
135+
grid-column: auto / 1;
136+
align-self: center;
137+
justify-self: end;
138+
margin: 10px;
139+
}
140+
141+
.justify-buttons {
142+
grid-row: auto / 1;
143+
align-self: end;
144+
justify-self: center;
145+
margin: 5px;
146+
}
147+
148+
.empty {
149+
grid-column: auto / 1;
150+
grid-row: auto / 1;
151+
}
152+
153+
</style>
154+
155+
<script>
156+
157+
function align(className, value) {
158+
var row1 = document.getElementsByClassName(className);
159+
for (var i = 0; i < row1.length; i++) {
160+
row1[i].style.alignSelf = value;
161+
}
162+
}
163+
164+
function justify(className, value) {
165+
var row1 = document.getElementsByClassName(className);
166+
for (var i = 0; i < row1.length; i++) {
167+
row1[i].style.justifySelf = value;
168+
}
169+
}
170+
171+
</script>
172+
173+
<h1>CSS Grid Layout <a href="https://drafts.csswg.org/css-grid/#alignment">Alignment</a></h1>
174+
175+
<img src="demo-alignment-lines.svg" alt="Demo Alignment Lines" />
176+
177+
<div class="grid">
178+
<div class="item row1 col1">Item 1</div>
179+
<div class="item row1 col2">Item 2:<br>Two lines</div>
180+
<div class="item row1 col3">Item 3: Some more text</div>
181+
<div class="item row1 col4">Item 4:<br>One line<br>Another line<br>Last line</div>
182+
<div class="item row1 col5">Item 5:<br>VeryLoooongText</div>
183+
<div class="item row2 col1">Item 6:<br>One line<br>Another line<br>Last line</div>
184+
<div class="item row2 col2">Item 7:<br>VeryLoooongText</div>
185+
<div class="item row2 col3">Item 8</div>
186+
<div class="item row2 col4">Item 9:<br>Two lines</div>
187+
<div class="item row2 col5">Item 10: Some more text</div>
188+
<div class="item row3 col1">Item 11: Some more text</div>
189+
<div class="item row3 col2">Item 12:<br>One line<br>Another line<br>Last line</div>
190+
<div class="item row3 col3">Item 13:<br>Two lines</div>
191+
<div class="item row3 col4">Item 14:<br>VeryLoooongText</div>
192+
<div class="item row3 col5">Item 15</div>
193+
194+
<div class="btn-group align-buttons">
195+
<a class="btn btn-default" onclick="align('row1', 'start');"><i class="fa fa-align-left"></i></a>
196+
<a class="btn btn-default" onclick="align('row1', 'center');"><i class="fa fa-align-center"></i></a>
197+
<a class="btn btn-default" onclick="align('row1', 'end');"><i class="fa fa-align-right"></i></a>
198+
<a class="btn btn-default" onclick="align('row1', 'stretch');"><i class="fa fa-align-justify"></i></a>
199+
</div>
200+
201+
<div class="btn-group align-buttons">
202+
<a class="btn btn-default" onclick="align('row2', 'start');"><i class="fa fa-align-left"></i></a>
203+
<a class="btn btn-default" onclick="align('row2', 'center');"><i class="fa fa-align-center"></i></a>
204+
<a class="btn btn-default" onclick="align('row2', 'end');"><i class="fa fa-align-right"></i></a>
205+
<a class="btn btn-default" onclick="align('row2', 'stretch');"><i class="fa fa-align-justify"></i></a>
206+
</div>
207+
208+
<div class="btn-group align-buttons">
209+
<a class="btn btn-default" onclick="align('row3', 'start');"><i class="fa fa-align-left"></i></a>
210+
<a class="btn btn-default" onclick="align('row3', 'center');"><i class="fa fa-align-center"></i></a>
211+
<a class="btn btn-default" onclick="align('row3', 'end');"><i class="fa fa-align-right"></i></a>
212+
<a class="btn btn-default" onclick="align('row3', 'stretch');"><i class="fa fa-align-justify"></i></a>
213+
</div>
214+
215+
<div class="btn-group justify-buttons">
216+
<a class="btn btn-default" onclick="justify('col1', 'start');"><i class="fa fa-align-left"></i></a>
217+
<a class="btn btn-default" onclick="justify('col1', 'center');"><i class="fa fa-align-center"></i></a>
218+
<a class="btn btn-default" onclick="justify('col1', 'end');"><i class="fa fa-align-right"></i></a>
219+
<a class="btn btn-default" onclick="justify('col1', 'stretch');"><i class="fa fa-align-justify"></i></a>
220+
</div>
221+
222+
<div class="btn-group justify-buttons">
223+
<a class="btn btn-default" onclick="justify('col2', 'start');"><i class="fa fa-align-left"></i></a>
224+
<a class="btn btn-default" onclick="justify('col2', 'center');"><i class="fa fa-align-center"></i></a>
225+
<a class="btn btn-default" onclick="justify('col2', 'end');"><i class="fa fa-align-right"></i></a>
226+
<a class="btn btn-default" onclick="justify('col2', 'stretch');"><i class="fa fa-align-justify"></i></a>
227+
</div>
228+
229+
<div class="btn-group justify-buttons">
230+
<a class="btn btn-default" onclick="justify('col3', 'start');"><i class="fa fa-align-left"></i></a>
231+
<a class="btn btn-default" onclick="justify('col3', 'center');"><i class="fa fa-align-center"></i></a>
232+
<a class="btn btn-default" onclick="justify('col3', 'end');"><i class="fa fa-align-right"></i></a>
233+
<a class="btn btn-default" onclick="justify('col3', 'stretch');"><i class="fa fa-align-justify"></i></a>
234+
</div>
235+
236+
<div class="btn-group justify-buttons">
237+
<a class="btn btn-default" onclick="justify('col4', 'start');"><i class="fa fa-align-left"></i></a>
238+
<a class="btn btn-default" onclick="justify('col4', 'center');"><i class="fa fa-align-center"></i></a>
239+
<a class="btn btn-default" onclick="justify('col4', 'end');"><i class="fa fa-align-right"></i></a>
240+
<a class="btn btn-default" onclick="justify('col4', 'stretch');"><i class="fa fa-align-justify"></i></a>
241+
</div>
242+
243+
<div class="btn-group justify-buttons">
244+
<a class="btn btn-default" onclick="justify('col5', 'start');"><i class="fa fa-align-left"></i></a>
245+
<a class="btn btn-default" onclick="justify('col5', 'center');"><i class="fa fa-align-center"></i></a>
246+
<a class="btn btn-default" onclick="justify('col5', 'end');"><i class="fa fa-align-right"></i></a>
247+
<a class="btn btn-default" onclick="justify('col5', 'stretch');"><i class="fa fa-align-justify"></i></a>
248+
</div>
249+
250+
<div class="empty"></div>
251+
252+
</div>

‎demo-alignment.png

83.9 KB
Loading

‎index.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,7 @@ <h4 class="list-group-item-heading">Auto-placement Algorithm</h4>
288288
<p>Auto-placement algorithm demo. Allow to new add grid items in different positions in order to check how the algorithm works. Also, includes the possibility to change between the different <code>grid-auto-flow</code> property values.</p>
289289
</li>
290290
<li class="list-group-item">
291-
<h4 class="list-group-item-heading">Alignment demo</h4>
291+
<h4 class="list-group-item-heading">Alignment demo (<code>justify|align-items</code>)</h4>
292292
<p>
293293
<a href="alignment-demo.html" class="label label-primary">example</a>
294294
<a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/alignment-demo.html" class="label label-success">html</a>
@@ -297,6 +297,16 @@ <h4 class="list-group-item-heading">Alignment demo</h4>
297297
</p>
298298
<p>Very simple demo that allows to play with different values for <code>justify-items</code> and <code>align-items</code> properties and check the results with different grid items.</p>
299299
</li>
300+
<li class="list-group-item">
301+
<h4 class="list-group-item-heading">Alignment demo (<code>justify|align-self</code>)</h4>
302+
<p>
303+
<a href="demo-alignment.html" class="label label-primary">example</a>
304+
<a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/demo-alignment.html" class="label label-success">html</a>
305+
<a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/demo-alignment.png" class="label label-info">screenshot</a>
306+
<a href="http://dev.w3.org/csswg/css-grid/#alignment" class="label label-warning">spec</a>
307+
</p>
308+
<p>Another alighment demo, this time it changes the value of <code>justify-self</code> and <code>align-self</code> properties of the items in each track (column/row).</p>
309+
</li>
300310
</ul>
301311
</div>
302312
</div>

0 commit comments

Comments
 (0)