Skip to content

Commit 5ce7d34

Browse files
rachelandrewrachelandrew
committed
moving an example
1 parent d46672f commit 5ce7d34

File tree

3 files changed

+94
-0
lines changed

3 files changed

+94
-0
lines changed

‎grid/docs/autoplacement.html

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Auto-placement example</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
list-style: none;
14+
margin: 1em auto;
15+
padding: 0;
16+
max-width: 800px;
17+
}
18+
.wrapper li {
19+
border: 1px solid #ccc;
20+
}
21+
22+
.wrapper li img {
23+
display: block;
24+
object-fit: cover;
25+
width: 100%;
26+
height: 100%;
27+
}
28+
</style>
29+
30+
<style class="editable">
31+
.wrapper {
32+
display: grid;
33+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
34+
gap: 10px;
35+
grid-auto-flow: dense;
36+
}
37+
38+
.wrapper li.landscape {
39+
grid-column-end: span 2;
40+
}
41+
</style>
42+
</head>
43+
44+
<body>
45+
<section class="preview">
46+
<ul class="wrapper">
47+
<li><img src="portrait.jpg" alt="placeholder"></li>
48+
<li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
49+
<li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
50+
<li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
51+
<li><img src="portrait.jpg" alt="placeholder"></li>
52+
<li><img src="portrait.jpg" alt="placeholder"></li>
53+
<li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
54+
<li><img src="portrait.jpg" alt="placeholder"></li>
55+
<li><img src="portrait.jpg" alt="placeholder"></li>
56+
<li><img src="portrait.jpg" alt="placeholder"></li>
57+
</ul>>
58+
</section>
59+
60+
<textarea class="playable playable-css" style="height: 200px;">
61+
.wrapper {
62+
display: grid;
63+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
64+
gap: 10px;
65+
grid-auto-flow: dense;
66+
}
67+
68+
.wrapper li.landscape {
69+
grid-column-end: span 2;
70+
}
71+
</textarea>
72+
73+
<textarea class="playable playable-html" style="height: 300px;">
74+
<ul class="wrapper">
75+
<li><img src="./portrait.jpg" alt="placeholder"></li>
76+
<li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
77+
<li><img src="portrait.jpg" alt="placeholder"></li>
78+
<li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
79+
<li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
80+
<li><img src="portrait.jpg" alt="placeholder"></li>
81+
<li><img src="portrait.jpg" alt="placeholder"></li>
82+
<li class="landscape"><img src="landscape.jpg" alt="placeholder"></li>
83+
<li><img src="portrait.jpg" alt="placeholder"></li>
84+
<li><img src="portrait.jpg" alt="placeholder"></li>
85+
<li><img src="portrait.jpg" alt="placeholder"></li>
86+
</ul>
87+
</textarea>
88+
89+
<div class="playable-buttons">
90+
<input id="reset" type="button" value="Reset" />
91+
</div>
92+
</body>
93+
<script src="../playable.js"></script>
94+
</html>

‎grid/docs/landscape.jpg

49.7 KB
Loading

‎grid/docs/portrait.jpg

26 KB
Loading

0 commit comments

Comments
 (0)