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

Commit

Permalink
feat(layout-grid): Implement layout grid alignment. (#885)
Browse files Browse the repository at this point in the history 
Closes #749.
  • Loading branch information
@yeelan0319
yeelan0319 authored Jul 6, 2017
1 parent 54c1692 commit 1528ed7
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 46 deletions.
22 changes: 14 additions & 8 deletions demos/layout-grid.html
View file
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
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
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

0 comments on commit 1528ed7

Please sign in to comment.