Skip to content

Commit 0fe29a4

Browse files
javifernandezjavifernandez
committed
Merge branch 'master' into gh-pages
2 parents 0d87f33 + 0ac792a commit 0fe29a4

16 files changed

+366
-5
lines changed

‎areas.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@
1919
width: 150px;
2020
}
2121

22+
.grid div {
23+
width: 100%;
24+
height: 100%;
25+
}
26+
2227
#item1 {
2328
-webkit-grid-area: a;
2429
grid-area: a;

‎autoplacement-span.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
<title>CSS Grid Layout Auto-placement Span Demo</title>
55
<link href="css/grid.css" rel="stylesheet">
66
<style>
7+
.grid div {
8+
width: 100%;
9+
height: 100%;
10+
}
11+
712
.rowauto-column1span2 {
813
-webkit-grid-column: 1 / span 2;
914
grid-column: 1 / span 2;

‎basic-alignment.html

Lines changed: 83 additions & 0 deletions
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

‎breadth.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
grid-definition-columns: 200px 1fr 200px;
1111
grid-template-columns: 200px 1fr 200px;
1212
}
13+
14+
.grid div {
15+
width: 100%;
16+
height: 100%;
17+
}
1318
</style>
1419
</head>
1520
<body>

‎css/grid.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@
55
background-color: #DDD;
66
}
77

8-
.grid div {
9-
width: 100%;
10-
height: 100%;
11-
}
12-
138
.grid > :nth-child(1) {
149
background-color: #FCC;
1510
}

‎dom-order-issue.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@
1313
grid-template-rows: 50px 50px;
1414
}
1515

16+
.grid div {
17+
width: 100%;
18+
height: 100%;
19+
}
20+
1621
.item {
1722
width: 100px;
1823
height: 100px;

‎full-alignment.html

Lines changed: 120 additions & 0 deletions
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

Lines changed: 22 additions & 0 deletions
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>

‎max-min-content.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@
2828
grid-definition-rows: auto auto;
2929
grid-template-rows: auto auto;
3030
}
31+
32+
.grid div {
33+
width: 100%;
34+
height: 100%;
35+
}
3136
</style>
3237
</head>
3338
<body>

‎repaint-issue.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020
font-size: 3em;
2121
}
2222

23+
.grid div {
24+
width: 100%;
25+
height: 100%;
26+
}
27+
2328
#itema {
2429
-webkit-grid-area: a;
2530
grid-area: a;

0 commit comments

Comments
 (0)