Skip to content

Commit 4e2b966

Browse files
javifernandezjavifernandez
committed
Overflow Alignment example.
1 parent 1a27c8d commit 4e2b966

File tree

3 files changed

+125
-0
lines changed

3 files changed

+125
-0
lines changed

‎index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,12 @@ <h4 class="list-group-item-heading">Alignment</h4>
194194
<a href="https://github.com/Igalia/css-grid-layout/blob/master/self-alignment.png" class="label label-info">screenshot</a>
195195
<a href="http://dev.w3.org/csswg/css-align-3/#self-alignment" class="label label-warning">spec</a>
196196
</p>
197+
<p>
198+
<a href="overflow-alignment.html" class="label label-primary">Overflow Alignment example</a>
199+
<a href="https://github.com/Igalia/css-grid-layout/blob/master/overlfow-alignment.html" class="label label-success">html</a>
200+
<a href="https://github.com/Igalia/css-grid-layout/blob/master/overlfow-alignment.png" class="label label-info">screenshot</a>
201+
<a href="http://dev.w3.org/csswg/css-align-3/#self-alignment" class="label label-warning">spec</a>
202+
</p>
197203
<p>Examples of how to apply the Box Alingnment properties in the Grid Layout spec.</p>
198204
</li>
199205
</ul>

‎overflow-alignment.html

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link href="css/grid.css" rel="stylesheet">
5+
<style>
6+
body {
7+
margin: 0;
8+
}
9+
10+
.grid {
11+
grid-template-columns: 75px 75px;
12+
-webkit-grid-template-columns: 75px 75px;
13+
-ms-grid-columns: 75px 75px;
14+
grid-template-rows: 60px 60px 60px;
15+
-webkit-grid-template-rows: 60px 60px 60px;
16+
-ms-grid-rows: 60px 60px 60px;
17+
width: -webkit-fit-content;
18+
}
19+
20+
.container {
21+
margin-left: 15px;
22+
float: left;
23+
}
24+
25+
.cellOverflowWidth {
26+
width: 95px;
27+
height: 20px;
28+
}
29+
30+
.cellOverflowHeight {
31+
width: 25px;
32+
height: 80px;
33+
}
34+
35+
.cellWithNoOverflow {
36+
width: 25px;
37+
height: 20px;
38+
}
39+
40+
.alignItemsCenter {
41+
align-items: center;
42+
}
43+
44+
.alignItemsCenterSafe {
45+
align-items: center safe;
46+
}
47+
48+
.alignItemsCenterTrue {
49+
align-items: center true;
50+
}
51+
52+
.alignSelfStretch {
53+
align-self: stretch;
54+
}
55+
56+
.justifyItemsCenter {
57+
justify-items: center;
58+
}
59+
60+
.justifyItemsCenterSafe {
61+
justify-items: center safe;
62+
}
63+
64+
.justifyItemsCenterTrue {
65+
justify-items: center true;
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<div class="container">
71+
<p>Default ('true') overflow value. <br>It may cause data lost overflowing the left edge.</p>
72+
73+
<div class="grid alignItemsCenter justifyItemsCenter">
74+
<div class="cellOverflowWidth row1-column1"></div>
75+
<div class="cellWithNoOverflow row2-column1"></div>
76+
<div class="row3-column1 alignSelfStretch justifySelfStretch"></div>
77+
<div class="cellWithNoOverflow row1-column2"></div>
78+
<div class="cellOverflowWidth row2-column2"></div>
79+
<div class="row3-column2 alignSelfStretch justifySelfStretch"></div>
80+
</div>
81+
82+
<p>The 'safe' overflow value prevents data lost <br>when overflowing the left edge.</p>
83+
84+
<div class="grid alignItemsCenterSafe justifyItemsCenterSafe">
85+
<div class="cellOverflowWidth row1-column1"></div>
86+
<div class="cellWithNoOverflow row2-column1"></div>
87+
<div class="row3-column1 alignSelfStretch justifySelfStretch"></div>
88+
<div class="cellWithNoOverflow row1-column2"></div>
89+
<div class="cellOverflowWidth row2-column2"></div>
90+
<div class="row3-column2 alignSelfStretch justifySelfStretch"></div>
91+
</div>
92+
</div>
93+
94+
<div class="container">
95+
<p>Explicit 'true' overflow value. <br>It may case data lost overflowing the top edge.</p>
96+
97+
<div class="grid alignItemsCenterTrue justifyItemsCenterTrue">
98+
<div class="cellOverflowHeight row1-column1"></div>
99+
<div class="cellWithNoOverflow row2-column1 "></div>
100+
<div class="row3-column1 alignSelfStretch justifySelfStretch"></div>
101+
<div class="row1-column2 alignSelfStretch justifySelfStretch"></div>
102+
<div class="cellWithNoOverflow row2-column2"></div>
103+
<div class="cellOverflowHeight row3-column2"></div>
104+
</div>
105+
106+
<p>The 'safe' overflow value prevents data lost <br>when overflowing the top edge.</p>
107+
108+
<div class="grid alignItemsCenterSafe justifyItemsCenterSafe">
109+
<div class="cellOverflowHeight row1-column1"></div>
110+
<div class="cellWithNoOverflow row2-column1"></div>
111+
<div class="row3-column1 alignSelfStretch justifySelfStretch"></div>
112+
<div class="row1-column2 alignSelfStretch justifySelfStretch"></div>
113+
<div class="cellWithNoOverflow row2-column2"></div>
114+
<div class="cellOverflowHeight row3-column2"></div>
115+
</div>
116+
</div>
117+
118+
</body>
119+
</html>

‎overflow-alignment.png

24.6 KB
Loading

0 commit comments

Comments
 (0)