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

feat(layout-grid): Implement layout grid alignment. #885

Merged
merged 1 commit into from
Jul 6, 2017
Merged

feat(layout-grid): Implement layout grid alignment. #885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions demos/layout-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,6 @@
max-width: 1280px;
}

.demo-grid.left-align {
margin-left: 0;
margin-right: auto;
}

.demo-grid-legend {
margin: 16px 0 8px 0;
}
Expand Down Expand Up @@ -288,7 +283,8 @@
</div>
</div>

<div class="demo-grid-legend">Grid with max width (1280px) and center alignment</div>
<h2 class="demo-grid-legend">Grid with max width</h2>
<div class="demo-grid-legend">Grid with max width (1280px) and center alignment by default</div>
<div class="demo-grid mdc-layout-grid max-width">
<div class="mdc-layout-grid__inner">
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
Expand All @@ -298,15 +294,15 @@
</div>

<div class="demo-grid-legend">Grid with max width (1280px) and left alignment</div>
<div class="demo-grid mdc-layout-grid max-width left-align">
<div class="demo-grid mdc-layout-grid max-width mdc-layout-grid--align-left">
<div class="mdc-layout-grid__inner">
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-4"></div>
</div>
</div>

<div class="demo-grid-legend">Fixed column width layout grid</div>
<h2 class="demo-grid-legend">Fixed column width layout grid</h2>
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell">
Expand Down Expand Up @@ -338,6 +334,7 @@
</div>
</div>
</div>
<div class="demo-grid-legend">Fixed column width layout grid and center alignment by default</div>
<div class="demo-grid mdc-layout-grid mdc-layout-grid--fixed-column-width">
<div class="mdc-layout-grid__inner">
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
Expand All @@ -346,6 +343,15 @@
</div>
</div>

<div class="demo-grid-legend">Fixed column width layout grid and right alignment</div>
<div class="demo-grid mdc-layout-grid mdc-layout-grid--fixed-column-width mdc-layout-grid--align-right">
<div class="mdc-layout-grid__inner">
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
<div class="demo-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-1"></div>
</div>
</div>

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

Expand Down
93 changes: 55 additions & 38 deletions packages/mdc-layout-grid/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,9 @@ You can change the margins and gutters for a grid using the `--mdc-layout-grid-m
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.


### Column spans
### Grid cells

#### Column spans

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

#### Cell reordering

By default, items are positioned in the source order. However, you can reorder them by using the
`mdc-layout-grid__cell--order-{number}` classes, where `{order}` is an integer between 1 and 12.

```html
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-3"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2"></div>
</div>
</div>
```

Please bear in mind that this may have an impact on accessibility, since screen readers and other tools tend to follow
source order.


#### Cell alignment

### Max width
Items are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different
behavior by using one of the `mdc-layout-grid__cell--align-{position}` alignment classes, where `{position}` is one of
`{top}`, `{middle}` or `{bottom}`.

```html
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom"></div>
</div>
</div>
```

### Grid with restricted width

#### Max width

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.


### Fixed column width grid
#### Fixed column width grid

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.

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

#### Alignment of grid

The grid is by default center aligned. User can add `mdc-layout-grid--align-left`
or `mdc-layout-grid--align-right` modifier class to change this behavior. Note, these
modifiers will have no effect when the grid already fills its container.

```
<div class="mdc-layout-grid mdc-layout-grid--fixed-column-width mdc-layout-grid--align-left">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell"></div>
<div class="mdc-layout-grid__cell"></div>
</div>
</div>
```

### Nested grid

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

### Reordering

By default, items are positioned in the source order. However, you can reorder them by using the
`mdc-layout-grid__cell--order-{number}` classes, where `{order}` is an integer between 1 and 12.

```html
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-3"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2"></div>
</div>
</div>
```

Please bear in mind that this may have an impact on accessibility, since screen readers and other tools tend to follow
source order.


### Alignment

Items are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different
behavior by using one of the `mdc-layout-grid__cell--align-{position}` alignment classes, where `{position}` is one of
`{top}`, `{middle}` or `{bottom}`.

```html
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom"></div>
</div>
</div>
```


## Sass mixin usage

Expand Down
9 changes: 9 additions & 0 deletions packages/mdc-layout-grid/mdc-layout-grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,4 +97,13 @@
}
}

.mdc-layout-grid--align-left {
margin-right: auto;
margin-left: 0;
}

.mdc-layout-grid--align-right {
margin-right: 0;
margin-left: auto;
}
// postcss-bem-linter: end