Skip to content

Commit 0ac792a

Browse files
javifernandezjavifernandez
committed
Alignment examples.
1 parent 6c457e4 commit 0ac792a

7 files changed

+326
-0
lines changed

‎basic-alignment.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link href="css/grid.css" rel="stylesheet">
5+
<style>
6+
.grid {
7+
grid-template-columns: 100px 100px;
8+
-webkit-grid-template-columns: 100px 100px;
9+
-ms-grid-columns: 100px 100px;
10+
grid-template-rows: 150px 150px;
11+
-webkit-grid-template-rows: 150px 150px;
12+
-ms-grid-rows: 150px 150px;
13+
width: -webkit-fit-content;
14+
}
15+
16+
.item {
17+
width: 30px;
18+
height: 60px;
19+
}
20+
21+
.content {
22+
width: 10px;
23+
height: 20px;
24+
background: black;
25+
}
26+
27+
.alignSelfStretch {
28+
align-self: stretch;
29+
}
30+
31+
.alignSelfEnd {
32+
align-self: end;
33+
}
34+
35+
.justifySelfStart {
36+
justify-self: start;
37+
}
38+
39+
.alignItemsCenter {
40+
align-items: center;
41+
}
42+
43+
.justifyItemsCenter {
44+
justify-items: center;
45+
}
46+
</style>
47+
</head>
48+
<body>
49+
<p>Initial alignment values and auto-sized grid items: 'stretch'</p>
50+
51+
<div class="grid">
52+
<div class="row1-column1">
53+
<div class="content"></div>
54+
</div>
55+
<div class="row1-column2">
56+
<div class="content"></div>
57+
</div>
58+
<div class="row2-column1">
59+
<div class="content"></div>
60+
</div>
61+
<div class="row2-column2">
62+
<div class="content"></div>
63+
</div>
64+
</div>
65+
66+
<p>Default alignment: 'center'. Self Alignment for specific Grid Items.</p>
67+
68+
<div class="grid alignItemsCenter justifyItemsCenter">
69+
<div class="row1-column1 alignSelfStretch">
70+
<div class="content"></div>
71+
</div>
72+
<div class="item row1-column2 justifySelfStart">
73+
<div class="content"></div>
74+
</div>
75+
<div class="item row2-column1 alignSelfEnd">
76+
<div class="content"></div>
77+
</div>
78+
<div class="item row2-column2">
79+
<div class="content"></div>
80+
</div>
81+
</div>
82+
</body>
83+
</html>

‎basic-alignment.png

20.5 KB
Loading

‎full-alignment.html

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link href="css/grid.css" rel="stylesheet">
5+
<style>
6+
.grid {
7+
grid-template-columns: 100px 100px 100px;
8+
-webkit-grid-template-columns: 100px 100px 100px;
9+
-ms-grid-columns: 100px 100px 100px;
10+
grid-template-rows: 100px 100px 100px;
11+
-webkit-grid-template-rows: 100px 100px 100px;
12+
-ms-grid-rows: 100px 100px 100px;
13+
width: -webkit-fit-content;
14+
}
15+
16+
.item {
17+
width: 20px;
18+
height: 30px;
19+
}
20+
21+
.content {
22+
width: 5px;
23+
height: 10px;
24+
background: black;
25+
}
26+
27+
.alignSelfStart {
28+
align-self: start;
29+
}
30+
.alignSelfCenter {
31+
align-self: center;
32+
}
33+
.alignSelfEnd {
34+
align-self: end;
35+
}
36+
37+
.justifySelfStart {
38+
justify-self: start;
39+
}
40+
.justifySelfCenter {
41+
justify-self: center;
42+
}
43+
.justifySelfEnd {
44+
justify-self: end;
45+
}
46+
47+
.alignItemsCenter {
48+
align-items: center;
49+
}
50+
.justifyItemsCenter {
51+
justify-items: center;
52+
}
53+
</style>
54+
</head>
55+
<body>
56+
<p>All grid items in the same Grid Cell, using different alignment values.</p>
57+
58+
<div class="grid">
59+
<div class="item row1-column1 alignSelfStart justifySelfStart">
60+
<div class="content"></div>
61+
</div>
62+
<div class="item row1-column1 alignSelfCenter justifySelfStart">
63+
<div class="content"></div>
64+
</div>
65+
<div class="item row1-column1 alignSelfEnd justifySelfStart">
66+
<div class="content"></div>
67+
</div>
68+
<div class="item row1-column1 alignSelfStart justifySelfCenter">
69+
<div class="content"></div>
70+
</div>
71+
<div class="item row1-column1 alignSelfCenter justifySelfCenter">
72+
<div class="content"></div>
73+
</div>
74+
<div class="item row1-column1 alignSelfEnd justifySelfCenter">
75+
<div class="content"></div>
76+
</div>
77+
<div class="item row1-column1 alignSelfStart justifySelfEnd">
78+
<div class="content"></div>
79+
</div>
80+
<div class="item row1-column1 alignSelfCenter justifySelfEnd">
81+
<div class="content"></div>
82+
</div>
83+
<div class="item row1-column1 alignSelfEnd justifySelfEnd">
84+
<div class="content"></div>
85+
</div>
86+
</div>
87+
88+
<p>All grid items centered in block and inline axixs.</p>
89+
90+
<div class="grid alignItemsCenter justifyItemsCenter" >
91+
<div class="item row1-column1">
92+
<div class="content"></div>
93+
</div>
94+
<div class="item row1-column2">
95+
<div class="content"></div>
96+
</div>
97+
<div class="item row1-column3">
98+
<div class="content"></div>
99+
</div>
100+
<div class="item row2-column1">
101+
<div class="content"></div>
102+
</div>
103+
<div class="item row2-column2">
104+
<div class="content"></div>
105+
</div>
106+
<div class="item row2-column3">
107+
<div class="content"></div>
108+
</div>
109+
<div class="item row3-column1">
110+
<div class="content"></div>
111+
</div>
112+
<div class="item row3-column2">
113+
<div class="content"></div>
114+
</div>
115+
<div class="item row3-column3">
116+
<div class="content"></div>
117+
</div>
118+
</div>
119+
</body>
120+
</html>

‎full-alignment.png

18.7 KB
Loading

‎index.html

+22
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,28 @@ <h4 class="list-group-item-heading">Repaint</h4>
174174
</p>
175175
<p>Items that expands to several cells are painted more than once.</p>
176176
</li>
177+
<li class="list-group-item">
178+
<h4 class="list-group-item-heading">Alignment</h4>
179+
<p>
180+
<a href="basic-alignment.html" class="label label-primary">Basic Alignment example</a>
181+
<a href="https://github.com/Igalia/css-grid-layout/blob/master/basic-alignment.html" class="label label-success">html</a>
182+
<a href="https://github.com/Igalia/css-grid-layout/blob/master/basic-alignment.png" class="label label-info">screenshot</a>
183+
<a href="http://dev.w3.org/csswg/css-grid/#alignment" class="label label-warning">spec</a>
184+
</p>
185+
<p>
186+
<a href="full-alignment.html" class="label label-primary">Full Alignment example</a>
187+
<a href="https://github.com/Igalia/css-grid-layout/blob/master/full-alignment.html" class="label label-success">html</a>
188+
<a href="https://github.com/Igalia/css-grid-layout/blob/master/full-alignment.png" class="label label-info">screenshot</a>
189+
<a href="http://dev.w3.org/csswg/css-align-3/#overview" class="label label-warning">spec</a>
190+
</p>
191+
<p>
192+
<a href="full-alignment.html" class="label label-primary">Self Alignment example</a>
193+
<a href="https://github.com/Igalia/css-grid-layout/blob/master/self-alignment.html" class="label label-success">html</a>
194+
<a href="https://github.com/Igalia/css-grid-layout/blob/master/self-alignment.png" class="label label-info">screenshot</a>
195+
<a href="http://dev.w3.org/csswg/css-align-3/#self-alignment" class="label label-warning">spec</a>
196+
</p>
197+
<p>Examples of how to apply the Box Alingnment properties in the Grid Layout spec.</p>
198+
</li>
177199
</ul>
178200
</div>
179201
</div>

‎self-alignment.html

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link href="css/grid.css" rel="stylesheet">
5+
<style>
6+
.grid {
7+
grid-template-columns: 100px 100px;
8+
-webkit-grid-template-columns: 100px 100px;
9+
-ms-grid-columns: 100px 100px;
10+
grid-template-rows: 200px 200px;
11+
-webkit-grid-template-rows: 200px 200px;
12+
-ms-grid-rows: 200px 200px;
13+
width: -webkit-fit-content;
14+
}
15+
16+
.item {
17+
width: 30px;
18+
height: 60px;
19+
}
20+
21+
.content {
22+
width: 10px;
23+
height: 20px;
24+
background: black;
25+
}
26+
27+
.alignItemsStart {
28+
align-items: start;
29+
}
30+
.alignItemsEnd {
31+
align-items: end;
32+
}
33+
.justifyItemsStart {
34+
justify-items: start;
35+
}
36+
.justifyItemsEnd {
37+
justify-items: end;
38+
}
39+
40+
.alignSelfSelfStart {
41+
align-self: self-start;
42+
}
43+
.alignSelfSelfEnd {
44+
align-self: self-end;
45+
}
46+
.justifySelfSelfStart {
47+
justify-self: self-start;
48+
}
49+
.justifySelfSelfEnd {
50+
justify-self: self-end;
51+
}
52+
53+
.verticalRL {
54+
-webkit-writing-mode: vertical-rl;
55+
}
56+
57+
.verticalLR {
58+
-webkit-writing-mode: vertical-lr;
59+
}
60+
61+
.directionRTL {
62+
direction: rtl;
63+
}
64+
</style>
65+
</head>
66+
<body>
67+
<p>Item at 1:1 has a different block-axis direction. The 'self-start' value aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject's start side.</p>
68+
69+
<div class="grid verticalRL alignItemsStart justifyItemsStart">
70+
<div class="item row1-column1 verticalLR alignSelfSelfStart">
71+
<div class="content"></div>
72+
</div>
73+
<div class="item row1-column2">
74+
<div class="content"></div>
75+
</div>
76+
<div class="item row2-column1">
77+
<div class="content"></div>
78+
</div>
79+
<div class="item row2-column2">
80+
<div class="content"></div>
81+
</div>
82+
</div>
83+
84+
<p>Item at 1:1 has a different inline-axis direction. The 'self-end' value aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject's end side.</p>
85+
86+
<div class="grid alignItemsEnd justifyItemsEnd">
87+
<div class="item row1-column1 directionRTL justifySelfSelfEnd">
88+
<div class="content"></div>
89+
</div>
90+
<div class="item row1-column2">
91+
<div class="content"></div>
92+
</div>
93+
<div class="item row2-column1">
94+
<div class="content"></div>
95+
</div>
96+
<div class="item row2-column2">
97+
<div class="content"></div>
98+
</div>
99+
</div>
100+
</body>
101+
</html>

‎self-alignment.png

27.8 KB
Loading

0 commit comments

Comments
 (0)