Skip to content

Commit cee5ce6

Browse files
chrisdavidmillschrisdavidmills
authored
Merge pull request mdn#12 from mbarker84/grid-wrapper-example
Grid wrapper example for CSS Layout Cookbook
2 parents c0b7c6a + 517b3d6 commit cee5ce6

File tree

2 files changed

+208
-0
lines changed

2 files changed

+208
-0
lines changed

‎css-cookbook/grid-wrapper--download.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<!-- this is an example from the MDN Layout Cookbook -->
8+
<title>CSS Cookbook: Grid Wrapper</title>
9+
10+
11+
<style>
12+
body {
13+
background-color: #fff;
14+
color: #333;
15+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
16+
padding: 0;
17+
margin: 0;
18+
}
19+
20+
.grid {
21+
display: grid;
22+
grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 130px)) minmax(20px, 1fr);
23+
grid-auto-rows: minmax(100px, auto);
24+
grid-gap: 10px;
25+
}
26+
27+
.grid>* {
28+
border: 2px solid rgb(95, 97, 110);
29+
border-radius: .5em;
30+
padding: 20px;
31+
}
32+
33+
.full-width {
34+
grid-column: 1 / -1;
35+
}
36+
37+
.wrapper {
38+
grid-column: 2 / -2;
39+
}
40+
41+
.left-edge {
42+
grid-column: 1 / -2;
43+
}
44+
45+
.right-wrapper {
46+
grid-column: 4 / -2;
47+
}
48+
</style>
49+
50+
51+
52+
</head>
53+
54+
<body>
55+
56+
<div class="grid">
57+
<div class="wrapper">
58+
<p>This item aligns to a central “wrapper” – columns that have a maximum width.</p>
59+
</div>
60+
<div class="full-width">
61+
<p>This item aligns to the edge of the grid container.</p>
62+
</div>
63+
<div class="left-edge">
64+
<p>This item aligns to the left edge of the grid container and the right edge of the wrapper.</p>
65+
</div>
66+
<div class="right-wrapper">
67+
<p>This item aligns to the right edge of the “wrapper” columns.</p>
68+
</div>
69+
</div>
70+
71+
</body>
72+
73+
</html>

‎css-cookbook/grid-wrapper.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Cookbook: Grid Wrapper</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
.grid {
10+
display: grid;
11+
grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 60px)) minmax(20px, 1fr);
12+
grid-auto-rows: minmax(100px, auto);
13+
grid-gap: 10px;
14+
}
15+
16+
.grid > * {
17+
border: 2px solid rgb(95, 97, 110);
18+
border-radius: .5em;
19+
padding: 20px;
20+
}
21+
22+
.full-width {
23+
grid-column: 1 / -1;
24+
}
25+
26+
.wrapper {
27+
grid-column: 2 / -2;
28+
}
29+
30+
.left-edge {
31+
grid-column: 1 / -2;
32+
}
33+
34+
.right-wrapper {
35+
grid-column: 4 / -2;
36+
}
37+
</style>
38+
39+
<style class="editable">
40+
.grid {
41+
display: grid;
42+
grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 60px)) minmax(20px, 1fr);
43+
grid-gap: 10px;
44+
}
45+
46+
.full-width {
47+
grid-column: 1 / -1;
48+
}
49+
50+
.wrapper {
51+
grid-column: 2 / -2;
52+
}
53+
54+
.left-edge {
55+
grid-column: 1 / -2;
56+
}
57+
58+
.right-wrapper {
59+
grid-column: 4 / -2;
60+
}
61+
</style>
62+
</head>
63+
64+
<body>
65+
<section class="preview">
66+
<div class="grid">
67+
<div class="wrapper">
68+
<p>This item aligns to a central “wrapper” – columns that have a maximum width.</p>
69+
</div>
70+
<div class="full-width">
71+
<p>This item aligns to the edge of the grid container.</p>
72+
</div>
73+
<div class="left-edge">
74+
<p>This item aligns to the left edge of the grid container and the right edge of the wrapper.</p>
75+
</div>
76+
<div class="right-wrapper">
77+
<p>This item aligns to the right edge of the “wrapper” columns.</p>
78+
</div>
79+
</div>
80+
</section>
81+
82+
<textarea class="playable playable-css" style="height: 170px;">
83+
.grid {
84+
display: grid;
85+
grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 60px)) minmax(20px, 1fr);
86+
grid-gap: 10px;
87+
}
88+
89+
.full-width {
90+
grid-column: 1 / -1;
91+
}
92+
93+
.wrapper {
94+
grid-column: 2 / -2;
95+
}
96+
97+
.left-edge {
98+
grid-column: 1 / -2;
99+
}
100+
101+
.right-wrapper {
102+
grid-column: 4 / -2;
103+
}
104+
</textarea>
105+
106+
<textarea class="playable playable-html" style="height: 70px;">
107+
<div class="grid">
108+
109+
<div class="wrapper">
110+
<p>This item aligns to a central “wrapper” – columns that have a maximum width.</p>
111+
</div>
112+
113+
<div class="full-width">
114+
<p>This item aligns to the edge of the grid container.</p>
115+
</div>
116+
117+
<div class="left-edge">
118+
<p>This item aligns to the left edge of the grid container and the right edge of the wrapper.</p>
119+
</div>
120+
121+
<div class="right-wrapper">
122+
<p>This item aligns to the right edge of the “wrapper” columns.</p>
123+
</div>
124+
125+
</div>
126+
</textarea>
127+
128+
<!-- leave everything below here alone -->
129+
<div class="playable-buttons">
130+
<input id="reset" type="button" value="Reset">
131+
</div>
132+
</body>
133+
<script src="playable.js"></script>
134+
135+
</html>

0 commit comments

Comments
 (0)