Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit dec20ab

Browse files
yeelan0319yeelan0319
authored
feat(layout-grid): make layout grid nestable (#804)
Closes #496. BREAKING CHANGE: Add mdc-layout-grid__inner as a wrapper for mdc-layout-grid__cell. All existing implementation need to add this extra wrapper layer after upgrade to the latest layout grid. This is for proper alignment both in nesting and removing the restriction that margin need to be at least half size of the padding.
1 parent 18c33e3 commit dec20ab

File tree

4 files changed

+257
-135
lines changed

4 files changed

+257
-135
lines changed

‎demos/layout-grid.html

Lines changed: 160 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,32 @@
4141
font-size: 1.5em;
4242
}
4343

44+
.demo-parent-cell {
45+
position: relative;
46+
background-color: #aaaaaa;
47+
}
48+
49+
.demo-parent-cell>span{
50+
position: absolute;
51+
top: 8px;
52+
left: 8px;
53+
font-size: 1.5em;
54+
color: white;
55+
}
56+
57+
.demo-child-cell {
58+
position: relative;
59+
}
60+
61+
.demo-child-cell>span{
62+
position: absolute;
63+
bottom: 8px;
64+
right: 8px;
65+
color: #ddd;
66+
}
67+
4468
.demo-grid.max-width {
45-
max-width: 1600px;
69+
max-width: 1280px;
4670
}
4771

4872
.demo-grid.left-align {
@@ -90,6 +114,10 @@
90114
margin: 24px;
91115
}
92116

117+
.hero .demo-grid {
118+
min-width: 360px;
119+
}
120+
93121
.hero .demo-cell {
94122
height: 60px;
95123
}
@@ -113,131 +141,169 @@
113141
<section class="hero">
114142

115143
<div class="demo-grid mdc-layout-grid">
116-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
117-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
118-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
144+
<div class="mdc-layout-grid__inner">
145+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
146+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
147+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
148+
</div>
119149
</div>
120150

121151
</section>
122152

123153
<section class="examples">
124154
<div class="mdc-layout-grid">
125-
<div class="mdc-layout-grid__cell">
126-
<div class="demo-controls">
127-
Desktop Margin:
128-
<select id="desktop-margin">
129-
<option value="8px">8px</option>
130-
<option value="16px">16px</option>
131-
<option value="24px" selected>24px</option>
132-
<option value="40px">40px</option>
133-
</select>
134-
135-
<br>
136-
137-
Desktop Gutter:
138-
<select id="desktop-gutter">
139-
<option value="8px">8px</option>
140-
<option value="16px">16px</option>
141-
<option value="24px" selected>24px</option>
142-
<option value="40px">40px</option>
143-
</select>
155+
<div class="mdc-layout-grid__inner">
156+
<div class="mdc-layout-grid__cell">
157+
<div class="demo-controls">
158+
Desktop Margin:
159+
<select id="desktop-margin">
160+
<option value="8px">8px</option>
161+
<option value="16px">16px</option>
162+
<option value="24px" selected>24px</option>
163+
<option value="40px">40px</option>
164+
</select>
165+
166+
<br>
167+
168+
Desktop Gutter:
169+
<select id="desktop-gutter">
170+
<option value="8px">8px</option>
171+
<option value="16px">16px</option>
172+
<option value="24px" selected>24px</option>
173+
<option value="40px">40px</option>
174+
</select>
175+
</div>
144176
</div>
145-
</div>
146-
<div class="mdc-layout-grid__cell">
147-
<div class="demo-controls">
148-
Tablet Margin:
149-
<select id="tablet-margin">
150-
<option value="8px">8px</option>
151-
<option value="16px" selected>16px</option>
152-
<option value="24px">24px</option>
153-
<option value="40px">40px</option>
154-
</select>
155-
156-
<br>
157-
158-
Tablet Gutter:
159-
<select id="tablet-gutter">
160-
<option value="8px">8px</option>
161-
<option value="16px" selected>16px</option>
162-
<option value="24px">24px</option>
163-
<option value="40px">40px</option>
164-
</select>
177+
<div class="mdc-layout-grid__cell">
178+
<div class="demo-controls">
179+
Tablet Margin:
180+
<select id="tablet-margin">
181+
<option value="8px">8px</option>
182+
<option value="16px" selected>16px</option>
183+
<option value="24px">24px</option>
184+
<option value="40px">40px</option>
185+
</select>
186+
187+
<br>
188+
189+
Tablet Gutter:
190+
<select id="tablet-gutter">
191+
<option value="8px">8px</option>
192+
<option value="16px" selected>16px</option>
193+
<option value="24px">24px</option>
194+
<option value="40px">40px</option>
195+
</select>
196+
</div>
165197
</div>
166-
</div>
167-
<div class="mdc-layout-grid__cell">
168-
<div class="demo-controls">
169-
Phone Margin:
170-
<select id="phone-margin">
171-
<option value="8px">8px</option>
172-
<option value="16px" selected>16px</option>
173-
<option value="24px">24px</option>
174-
<option value="40px">40px</option>
175-
</select>
176-
177-
<br>
178-
179-
Phone Gutter:
180-
<select id="phone-gutter">
181-
<option value="8px">8px</option>
182-
<option value="16px" selected>16px</option>
183-
<option value="24px">24px</option>
184-
<option value="40px">40px</option>
185-
</select>
198+
<div class="mdc-layout-grid__cell">
199+
<div class="demo-controls">
200+
Phone Margin:
201+
<select id="phone-margin">
202+
<option value="8px">8px</option>
203+
<option value="16px" selected>16px</option>
204+
<option value="24px">24px</option>
205+
<option value="40px">40px</option>
206+
</select>
207+
208+
<br>
209+
210+
Phone Gutter:
211+
<select id="phone-gutter">
212+
<option value="8px">8px</option>
213+
<option value="16px" selected>16px</option>
214+
<option value="24px">24px</option>
215+
<option value="40px">40px</option>
216+
</select>
217+
</div>
186218
</div>
187219
</div>
188220
</div>
189221

190222
<div class="demo-warning"></div>
191223

192-
<div class="demo-grid-legend">Grid of 1 column wide items</div>
224+
<div class="demo-grid-legend">Grid of default wide (4 columns) items</div>
193225
<div class="demo-grid mdc-layout-grid">
194-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
195-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
196-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
197-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
198-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
199-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
200-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
201-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
202-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
203-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
204-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
205-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
226+
<div class="mdc-layout-grid__inner">
227+
<div class="demo-cell mdc-layout-grid__cell">4</div>
228+
<div class="demo-cell mdc-layout-grid__cell">4</div>
229+
<div class="demo-cell mdc-layout-grid__cell">4</div>
230+
</div>
206231
</div>
207232

208-
<div class="demo-grid-legend">Grid of 4 column wide items</div>
233+
<div class="demo-grid-legend">Grid of 1 column wide items</div>
209234
<div class="demo-grid mdc-layout-grid">
210-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
211-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
212-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
235+
<div class="mdc-layout-grid__inner">
236+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
237+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
238+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
239+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
240+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
241+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
242+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
243+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
244+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
245+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
246+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
247+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1">1</div>
248+
</div>
213249
</div>
214250

215251
<div class="demo-grid-legend">Grid of differently sized items</div>
216252
<div class="demo-grid mdc-layout-grid">
217-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-6">6</div>
218-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
219-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-2">2</div>
253+
<div class="mdc-layout-grid__inner">
254+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-6">6</div>
255+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
256+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-2">2</div>
257+
</div>
220258
</div>
221259

222260
<div class="demo-grid-legend">Grid of items with tweaks at different screen sizes</div>
223261
<div class="demo-grid mdc-layout-grid">
224-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-8-tablet">6 (8 tablet)</div>
225-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6-tablet">4 (6 tablet)</div>
226-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-2 mdc-layout-grid__cell--span-4-phone">2 (4 phone)</div>
262+
<div class="mdc-layout-grid__inner">
263+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-8-tablet">6 (8 tablet)</div>
264+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6-tablet">4 (6 tablet)</div>
265+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-2 mdc-layout-grid__cell--span-4-phone">2 (4 phone)</div>
266+
</div>
267+
</div>
268+
269+
<div class="demo-grid-legend">Grid nested within parent grid cell</div>
270+
<div class="demo-grid mdc-layout-grid">
271+
<div class="mdc-layout-grid__inner">
272+
<div class="demo-parent-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
273+
<div class="mdc-layout-grid__inner">
274+
<div class="demo-child-cell demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
275+
<span>Child 4</span>
276+
</div>
277+
<div class="demo-child-cell demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
278+
<span>Child 4</span>
279+
</div>
280+
<div class="demo-child-cell demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
281+
<span>Child 4</span>
282+
</div>
283+
</div>
284+
<span>Parent 4</span>
285+
</div>
286+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
287+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4">4</div>
288+
</div>
227289
</div>
228290

229-
<div class="demo-grid-legend">Grid with max width and center alignment</div>
291+
<div class="demo-grid-legend">Grid with max width (1280px) and center alignment</div>
230292
<div class="demo-grid mdc-layout-grid max-width">
231-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
232-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
233-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
293+
<div class="mdc-layout-grid__inner">
294+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
295+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
296+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
297+
</div>
234298
</div>
235299

236-
<div class="demo-grid-legend">Grid with max width and left alignment</div>
300+
<div class="demo-grid-legend">Grid with max width (1280px) and left alignment</div>
237301
<div class="demo-grid mdc-layout-grid max-width left-align">
238-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
239-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
240-
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
302+
<div class="mdc-layout-grid__inner">
303+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
304+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
305+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
306+
</div>
241307
</div>
242308

243309
<div class="demo-ruler"><div id="current"></div></div>

0 commit comments

Comments
 (0)