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

Commit 1528ed7

Browse files
authored
feat(layout-grid): Implement layout grid alignment. (#885)
Closes #749.
1 parent 54c1692 commit 1528ed7

File tree

3 files changed

+78
-46
lines changed

3 files changed

+78
-46
lines changed

demos/layout-grid.html

+14-8
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,6 @@
6969
max-width: 1280px;
7070
}
7171

72-
.demo-grid.left-align {
73-
margin-left: 0;
74-
margin-right: auto;
75-
}
76-
7772
.demo-grid-legend {
7873
margin: 16px 0 8px 0;
7974
}
@@ -288,7 +283,8 @@
288283
</div>
289284
</div>
290285

291-
<div class="demo-grid-legend">Grid with max width (1280px) and center alignment</div>
286+
<h2 class="demo-grid-legend">Grid with max width</h2>
287+
<div class="demo-grid-legend">Grid with max width (1280px) and center alignment by default</div>
292288
<div class="demo-grid mdc-layout-grid max-width">
293289
<div class="mdc-layout-grid__inner">
294290
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
@@ -298,15 +294,15 @@
298294
</div>
299295

300296
<div class="demo-grid-legend">Grid with max width (1280px) and left alignment</div>
301-
<div class="demo-grid mdc-layout-grid max-width left-align">
297+
<div class="demo-grid mdc-layout-grid max-width mdc-layout-grid--align-left">
302298
<div class="mdc-layout-grid__inner">
303299
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
304300
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
305301
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
306302
</div>
307303
</div>
308304

309-
<div class="demo-grid-legend">Fixed column width layout grid</div>
305+
<h2 class="demo-grid-legend">Fixed column width layout grid</h2>
310306
<div class="mdc-layout-grid">
311307
<div class="mdc-layout-grid__inner">
312308
<div class="mdc-layout-grid__cell">
@@ -338,6 +334,7 @@
338334
</div>
339335
</div>
340336
</div>
337+
<div class="demo-grid-legend">Fixed column width layout grid and center alignment by default</div>
341338
<div class="demo-grid mdc-layout-grid mdc-layout-grid--fixed-column-width">
342339
<div class="mdc-layout-grid__inner">
343340
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
@@ -346,6 +343,15 @@
346343
</div>
347344
</div>
348345

346+
<div class="demo-grid-legend">Fixed column width layout grid and right alignment</div>
347+
<div class="demo-grid mdc-layout-grid mdc-layout-grid--fixed-column-width mdc-layout-grid--align-right">
348+
<div class="mdc-layout-grid__inner">
349+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
350+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
351+
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
352+
</div>
353+
</div>
354+
349355
<div class="demo-ruler"><div id="current"></div></div>
350356
</section>
351357

packages/mdc-layout-grid/README.md

+55-38
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@ You can change the margins and gutters for a grid using the `--mdc-layout-grid-m
9292
You can change the margins and gutters using sass variables if you are compiling from them. MDC layout grid uses sass map `mdc-layout-grid-default-margin` and `mdc-layout-grid-default-gutter` to define margins and gutters on different screen types.
9393

9494

95-
### Column spans
95+
### Grid cells
96+
97+
#### Column spans
9698

9799
```html
98100
<div class="mdc-layout-grid">
@@ -131,13 +133,49 @@ In the example above, the first cell has a default span of 6, the second 4, and
131133
the first cell becomes 8 columns wide instead, and the second 6 columns wide. At phone sizes, the third cell becomes 4
132134
columns wide.
133135

136+
#### Cell reordering
137+
138+
By default, items are positioned in the source order. However, you can reorder them by using the
139+
`mdc-layout-grid__cell--order-{number}` classes, where `{order}` is an integer between 1 and 12.
140+
141+
```html
142+
<div class="mdc-layout-grid">
143+
<div class="mdc-layout-grid__inner">
144+
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-3"></div>
145+
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1"></div>
146+
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2"></div>
147+
</div>
148+
</div>
149+
```
150+
151+
Please bear in mind that this may have an impact on accessibility, since screen readers and other tools tend to follow
152+
source order.
153+
154+
155+
#### Cell alignment
134156

135-
### Max width
157+
Items are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different
158+
behavior by using one of the `mdc-layout-grid__cell--align-{position}` alignment classes, where `{position}` is one of
159+
`{top}`, `{middle}` or `{bottom}`.
160+
161+
```html
162+
<div class="mdc-layout-grid">
163+
<div class="mdc-layout-grid__inner">
164+
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top"></div>
165+
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle"></div>
166+
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom"></div>
167+
</div>
168+
</div>
169+
```
170+
171+
### Grid with restricted width
172+
173+
#### Max width
136174

137175
MDC layout grids take up the parent element space by default. However, user can set `$mdc-layout-grid-max-width` to restrict the max-width of the layout grid.
138176

139177

140-
### Fixed column width grid
178+
#### Fixed column width grid
141179

142180
You can designate each column to have a certain width by using `mdc-layout-grid--fixed-column-width` modifier. The column width can be specified through sass map `$mdc-layout-grid-column-width` or css custom properties `--mdc-layout-grid-column-width-{screen_size}`. The column width is set to 72px on all devices by default.
143181

@@ -156,6 +194,20 @@ You can designate each column to have a certain width by using `mdc-layout-grid-
156194
</div>
157195
```
158196

197+
#### Alignment of grid
198+
199+
The grid is by default center aligned. User can add `mdc-layout-grid--align-left`
200+
or `mdc-layout-grid--align-right` modifier class to change this behavior. Note, these
201+
modifiers will have no effect when the grid already fills its container.
202+
203+
```
204+
<div class="mdc-layout-grid mdc-layout-grid--fixed-column-width mdc-layout-grid--align-left">
205+
<div class="mdc-layout-grid__inner">
206+
<div class="mdc-layout-grid__cell"></div>
207+
<div class="mdc-layout-grid__cell"></div>
208+
</div>
209+
</div>
210+
```
159211

160212
### Nested grid
161213

@@ -180,41 +232,6 @@ However, Material guideline do not recommend have a deeply nested grid since it
180232
</div>
181233
```
182234

183-
### Reordering
184-
185-
By default, items are positioned in the source order. However, you can reorder them by using the
186-
`mdc-layout-grid__cell--order-{number}` classes, where `{order}` is an integer between 1 and 12.
187-
188-
```html
189-
<div class="mdc-layout-grid">
190-
<div class="mdc-layout-grid__inner">
191-
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-3"></div>
192-
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1"></div>
193-
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2"></div>
194-
</div>
195-
</div>
196-
```
197-
198-
Please bear in mind that this may have an impact on accessibility, since screen readers and other tools tend to follow
199-
source order.
200-
201-
202-
### Alignment
203-
204-
Items are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different
205-
behavior by using one of the `mdc-layout-grid__cell--align-{position}` alignment classes, where `{position}` is one of
206-
`{top}`, `{middle}` or `{bottom}`.
207-
208-
```html
209-
<div class="mdc-layout-grid">
210-
<div class="mdc-layout-grid__inner">
211-
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top"></div>
212-
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle"></div>
213-
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom"></div>
214-
</div>
215-
</div>
216-
```
217-
218235

219236
## Sass mixin usage
220237

packages/mdc-layout-grid/mdc-layout-grid.scss

+9
Original file line numberDiff line numberDiff line change
@@ -97,4 +97,13 @@
9797
}
9898
}
9999

100+
.mdc-layout-grid--align-left {
101+
margin-right: auto;
102+
margin-left: 0;
103+
}
104+
105+
.mdc-layout-grid--align-right {
106+
margin-right: 0;
107+
margin-left: auto;
108+
}
100109
// postcss-bem-linter: end

0 commit comments

Comments
 (0)