Skip to content

Commit f1b6c6a

Browse files
mregomrego
committed
Add auto-placement algorithm demo
1 parent f4e4e7c commit f1b6c6a

File tree

4 files changed

+171
-12
lines changed

4 files changed

+171
-12
lines changed

‎autoplacement.html

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
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+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
.grid {
13+
margin: 50px;
14+
float: left;
15+
-ms-grid-columns: 150px 150px 150px;
16+
-webkit-grid-definition-columns: 150px 150px 150px;
17+
-webkit-grid-template-columns: 150px 150px 150px;
18+
grid-definition-columns: 150px 150px 150px;
19+
grid-template-columns: 150px 150px 150px;
20+
-ms-grid-rows: 75px 75px 75px;
21+
-webkit-grid-definition-rows: 75px 75px 75px;
22+
-webkit-grid-template-rows: 75px 75px 75px;
23+
grid-definition-rows: 75px 75px 75px;
24+
grid-template-rows: 75px 75px 75px;
25+
-webkit-grid-auto-flow: row;
26+
grid-auto-flow: row;
27+
-grid-auto-columns: 150px;
28+
grid-auto-columns: 150px;
29+
-grid-auto-rows: 75px;
30+
grid-auto-rows: 75px;
31+
}
32+
33+
#table {
34+
position: absolute;
35+
top: 50px;
36+
left: 50px;
37+
border-collapse: collapse;
38+
width: 450px;
39+
height: 225px;
40+
}
41+
42+
#table tr {
43+
height: 75px;
44+
}
45+
46+
#table td {
47+
border: 2px dashed grey;
48+
width: 150px;
49+
}
50+
51+
#new {
52+
padding-left: 25px;
53+
}
54+
</style>
55+
<script>
56+
function randomColor() {
57+
return "#" + Math.floor(Math.random() * 16777215).toString(16);
58+
}
59+
60+
function addGridItem() {
61+
var grid = document.getElementById("grid");
62+
var row = document.getElementById("row");
63+
var rowspan = document.getElementById("rowspan");
64+
var column = document.getElementById("column");
65+
var columnspan = document.getElementById("columnspan");
66+
67+
var item = document.createElement("div");
68+
item.style.gridRow = row.value + " / span " + rowspan.value;
69+
item.style.gridColumn = column.value + " / span " + columnspan.value;
70+
item.style.backgroundColor = randomColor();
71+
72+
item.innerHTML = "<pre> grid-row:\n " + item.style.gridRowStart + " / " + item.style.gridRowEnd +
73+
"\n grid-column:\n " + item.style.gridColumnStart + " / " + item.style.gridColumnEnd + "</pre>";
74+
75+
grid.appendChild(item);
76+
}
77+
78+
function addRandomGridItem() {
79+
var row = document.getElementById("row");
80+
var rowspan = document.getElementById("rowspan");
81+
var column = document.getElementById("column");
82+
var columnspan = document.getElementById("columnspan");
83+
84+
row.selectedIndex = Math.floor(Math.random() * 4);
85+
rowspan.selectedIndex = Math.floor(Math.random() * 3);
86+
column.selectedIndex = Math.floor(Math.random() * 4);
87+
columnspan.selectedIndex = Math.floor(Math.random() * 3);
88+
89+
addGridItem();
90+
}
91+
</script>
92+
</head>
93+
<body>
94+
<div id="grid" class="grid">
95+
</div>
96+
<div style="clear: both;"></div>
97+
<div id="new">
98+
<h2>CSS Grid Layout Auto-placement Algorithm</h2>
99+
<p>New grid item at
100+
row
101+
<select id="row">
102+
<option value="auto" selected>auto</option>
103+
<option value="1">1</option>
104+
<option value="2">2</option>
105+
<option value="3">3</option>
106+
</select>
107+
spanning
108+
<select id="rowspan">
109+
<option value="1" selected>1 row</option>
110+
<option value="2">2 rows</option>
111+
<option value="3">3 rows</option>
112+
</select>
113+
and column
114+
<select id="column">
115+
<option value="auto" selected>auto</option>
116+
<option value="1">1</option>
117+
<option value="2">2</option>
118+
<option value="3">3</option>
119+
</select>
120+
spanning
121+
<select id="columnspan">
122+
<option value="1" selected>1 column</option>
123+
<option value="2">2 columns</option>
124+
<option value="3">3 columns</option>
125+
</select>
126+
</p>
127+
<button onClick="addGridItem();">Add</button>
128+
<button onClick="addRandomGridItem();">Add random</button>
129+
<p><a href="http://www.w3.org/TR/css-grid-1/#auto-placement">Spec</a></p>
130+
</div>
131+
<table id="table">
132+
<tr>
133+
<td></td>
134+
<td></td>
135+
<td></td>
136+
</tr>
137+
<tr>
138+
<td></td>
139+
<td></td>
140+
<td></td>
141+
</tr>
142+
<tr>
143+
<td></td>
144+
<td></td>
145+
<td></td>
146+
</tr>
147+
</table>
148+
</body>
149+
</html>

‎autoplacement.png

43.6 KB
Loading

‎css/grid.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,51 +10,51 @@
1010
height: 100%;
1111
}
1212

13-
.grid :nth-child(1) {
13+
.grid > :nth-child(1) {
1414
background-color: #FCC;
1515
}
1616

17-
.grid :nth-child(2) {
17+
.grid > :nth-child(2) {
1818
background-color: #CFC;
1919
}
2020

21-
.grid :nth-child(3) {
21+
.grid > :nth-child(3) {
2222
background-color: #CCF;
2323
}
2424

25-
.grid :nth-child(4) {
25+
.grid > :nth-child(4) {
2626
background-color: #C99;
2727
}
2828

29-
.grid :nth-child(5) {
29+
.grid > :nth-child(5) {
3030
background-color: #9C9;
3131
}
3232

33-
.grid :nth-child(6) {
33+
.grid > :nth-child(6) {
3434
background-color: #99C;
3535
}
3636

37-
.grid :nth-child(7) {
37+
.grid > :nth-child(7) {
3838
background-color: #FFC;
3939
}
4040

41-
.grid :nth-child(8) {
41+
.grid > :nth-child(8) {
4242
background-color: #FCF;
4343
}
4444

45-
.grid :nth-child(9) {
45+
.grid > :nth-child(9) {
4646
background-color: #CFF;
4747
}
4848

49-
.grid :nth-child(10) {
49+
.grid > :nth-child(10) {
5050
background-color: #CC9;
5151
}
5252

53-
.grid :nth-child(11) {
53+
.grid > :nth-child(11) {
5454
background-color: #C9C;
5555
}
5656

57-
.grid :nth-child(12) {
57+
.grid > :nth-child(12) {
5858
background-color: #9CC;
5959
}
6060

‎index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,16 @@ <h4 class="list-group-item-heading">Gallery</h4>
191191
</p>
192192
<p>Example app using grid layout. Responsive design depending on window size.</p>
193193
</li>
194+
<li class="list-group-item">
195+
<h4 class="list-group-item-heading">Auto-placement Algorithm</h4>
196+
<p>
197+
<a href="autoplacement.html" class="label label-primary">example</a>
198+
<a href="https://github.com/Igalia/css-grid-layout/blob/master/autoplacement.html" class="label label-success">html</a>
199+
<a href="https://github.com/Igalia/css-grid-layout/blob/master/autoplacement.png" class="label label-info">screenshot</a>
200+
<a href="http://www.w3.org/TR/css-grid-1/#auto-placement" class="label label-warning">spec</a>
201+
</p>
202+
<p>Auto-placement algorithm demo. Allow to new add grid items in different positions in order to check how the algorithm works.</p>
203+
</li>
194204
</ul>
195205
</div>
196206
</div>

0 commit comments

Comments
 (0)