Skip to content

Commit 6f35a7b

Browse files
rachelandrewrachelandrew
committed
Create implicit.html
an extra example
1 parent b761cc1 commit 6f35a7b

File tree

1 file changed

+108
-0
lines changed

1 file changed

+108
-0
lines changed

‎grid/subgrid/implicit.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Subgrid: columns only means implicit tracks</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.grid {
13+
border: 2px solid #f76707;
14+
border-radius: 5px;
15+
background-color: #fff4e6;
16+
}
17+
18+
.item {
19+
border: 2px solid #ffa94d;
20+
border-radius: 5px;
21+
color: #d9480f;
22+
}
23+
24+
.subitem {
25+
background-color: #d9480f;
26+
color: #fff;
27+
border-radius: 5px;
28+
}
29+
</style>
30+
31+
<style class="editable">
32+
.grid {
33+
display: grid;
34+
grid-template-columns: repeat(9, 1fr);
35+
grid-template-rows: repeat(4, minmax(100px, auto));
36+
}
37+
38+
.item {
39+
display: grid;
40+
grid-column: 2 / 7;
41+
grid-row: 2 / 4;
42+
grid-template-columns: subgrid;
43+
grid-auto-rows: minmax(100px, auto);
44+
}
45+
</style>
46+
</head>
47+
48+
<body>
49+
<section class="preview">
50+
<div class="grid">
51+
<div class="item">
52+
<div class="subitem">1</div>
53+
<div class="subitem">2</div>
54+
<div class="subitem">3</div>
55+
<div class="subitem">4</div>
56+
<div class="subitem">5</div>
57+
<div class="subitem">6</div>
58+
<div class="subitem">7</div>
59+
<div class="subitem">8</div>
60+
<div class="subitem">9</div>
61+
<div class="subitem">10</div>
62+
<div class="subitem">11</div>
63+
<div class="subitem">12</div>
64+
</div>
65+
</div>
66+
</section>
67+
68+
<textarea class="playable playable-css" style="height: 350px;">
69+
.grid {
70+
display: grid;
71+
grid-template-columns: repeat(9, 1fr);
72+
grid-template-rows: repeat(4, minmax(100px, auto));
73+
}
74+
75+
.item {
76+
display: grid;
77+
grid-column: 2 / 7;
78+
grid-row: 2 / 4;
79+
grid-template-columns: subgrid;
80+
grid-auto-rows: minmax(100px, auto);
81+
}
82+
</textarea>
83+
84+
<textarea class="playable playable-html" style="height: 200px;">
85+
<div class="grid">
86+
<div class="item">
87+
<div class="subitem">1</div>
88+
<div class="subitem">2</div>
89+
<div class="subitem">3</div>
90+
<div class="subitem">4</div>
91+
<div class="subitem">5</div>
92+
<div class="subitem">6</div>
93+
<div class="subitem">7</div>
94+
<div class="subitem">8</div>
95+
<div class="subitem">9</div>
96+
<div class="subitem">10</div>
97+
<div class="subitem">11</div>
98+
<div class="subitem">12</div>
99+
</div>
100+
</div>
101+
</textarea>
102+
103+
<div class="playable-buttons">
104+
<input id="reset" type="button" value="Reset" />
105+
</div>
106+
</body>
107+
<script src="../playable.js"></script>
108+
</html>

0 commit comments

Comments
 (0)