Skip to content

Commit 85aa9d0

Browse files
mregomrego
committed
Add simple alignment demo
1 parent 28d25e2 commit 85aa9d0

File tree

3 files changed

+136
-0
lines changed

3 files changed

+136
-0
lines changed

‎alignment-demo.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link href="css/grid.css" rel="stylesheet">
5+
<style>
6+
body {
7+
font-family: Helvetica, Arial, sans-serif;
8+
font-size: 120%;
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
code {
14+
font-size: 110%;
15+
font-weight: bold;
16+
}
17+
18+
select {
19+
font-size: 110%;
20+
}
21+
22+
.grid {
23+
margin: 50px;
24+
float: left;
25+
-webkit-grid-template-columns: 200px 200px 200px;
26+
grid-template-columns: 200px 200px 200px;
27+
-webkit-grid-template-rows: 200px 200px;
28+
grid-template-rows: 200px 200px;
29+
}
30+
31+
#table {
32+
position: absolute;
33+
top: 50px;
34+
left: 50px;
35+
border-collapse: collapse;
36+
width: 600px;
37+
height: 400px;
38+
}
39+
40+
#table tr {
41+
height: 200px;
42+
}
43+
44+
#table td {
45+
border: 2px dashed grey;
46+
width: 300px;
47+
}
48+
49+
#properties {
50+
padding-left: 25px;
51+
}
52+
53+
.grid div {
54+
padding: 10px;
55+
font-weight: bold;
56+
}
57+
58+
.item3 {
59+
-webkit-grid-row: span 2;
60+
grid-row: span 2;
61+
}
62+
63+
.item4 {
64+
-webkit-grid-column: span 2;
65+
grid-column: span 2;
66+
}
67+
</style>
68+
<script>
69+
function updateJustifyItems() {
70+
var grid = document.getElementById("grid");
71+
var justifyItems = document.getElementById("justify-items");
72+
73+
grid.style.webkitJustifyItems = justifyItems.value;
74+
grid.style.justifyItems = justifyItems.value;
75+
}
76+
77+
function updateAlignItems() {
78+
var grid = document.getElementById("grid");
79+
var alignItems = document.getElementById("align-items");
80+
81+
grid.style.webkitAlignItems = alignItems.value;
82+
grid.style.alignItems = alignItems.value;
83+
}
84+
</script>
85+
</head>
86+
<body>
87+
<div id="grid" class="grid">
88+
<div class="item1">Item 1</div>
89+
<div class="item2">Item 2<br>with two lines</div>
90+
<div class="item3">Item 3<br>(spanning 2 rows)</div>
91+
<div class="item4">Item 4<br>(spanning 2 columns)</div>
92+
</div>
93+
<div style="clear: both;"></div>
94+
<div id="properties">
95+
<h2>CSS Grid Layout: <a href="https://drafts.csswg.org/css-grid/#alignment">Alignment</a></h2>
96+
<p>Property <a href="http://www.w3.org/TR/css3-align/#propdef-justify-items"><code>justify-items</code></a> is
97+
<select id="justify-items" onchange="updateJustifyItems();">
98+
<option value="stretch" selected>stretch</option>
99+
<option value="start">start</option>
100+
<option value="center">center</option>
101+
<option value="end">end</option>
102+
</select>
103+
</p>
104+
<p>Property <a href="http://www.w3.org/TR/css3-align/#propdef-align-items"><code>align-items</code></a> is
105+
<select id="align-items" onchange="updateAlignItems();">
106+
<option value="stretch" selected>stretch</option>
107+
<option value="start">start</option>
108+
<option value="center">center</option>
109+
<option value="end">end</option>
110+
</select>
111+
</p>
112+
</div>
113+
<table id="table">
114+
<tr>
115+
<td></td>
116+
<td></td>
117+
<td></td>
118+
</tr>
119+
<tr>
120+
<td></td>
121+
<td></td>
122+
<td></td>
123+
</tr>
124+
</table>
125+
</body>
126+
</html>

‎alignment-demo.png

40 KB
Loading

‎index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,16 @@ <h4 class="list-group-item-heading">Auto-placement Algorithm</h4>
277277
</p>
278278
<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>
279279
</li>
280+
<li class="list-group-item">
281+
<h4 class="list-group-item-heading">Alignment demo</h4>
282+
<p>
283+
<a href="alignment-demo.html" class="label label-primary">example</a>
284+
<a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/alignment-demo.html" class="label label-success">html</a>
285+
<a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/alignment-demo.png" class="label label-info">screenshot</a>
286+
<a href="http://dev.w3.org/csswg/css-grid/#alignment" class="label label-warning">spec</a>
287+
</p>
288+
<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>
289+
</li>
280290
</ul>
281291
</div>
282292
</div>

0 commit comments

Comments
 (0)