You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 13, 2025. It is now read-only.
Copy file name to clipboardexpand all lines: packages/mdc-layout-grid/README.md
+55-38
Original file line number
Diff line number
Diff line change
@@ -92,7 +92,9 @@ You can change the margins and gutters for a grid using the `--mdc-layout-grid-m
92
92
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.
93
93
94
94
95
-
### Column spans
95
+
### Grid cells
96
+
97
+
#### Column spans
96
98
97
99
```html
98
100
<divclass="mdc-layout-grid">
@@ -131,13 +133,49 @@ In the example above, the first cell has a default span of 6, the second 4, and
131
133
the first cell becomes 8 columns wide instead, and the second 6 columns wide. At phone sizes, the third cell becomes 4
132
134
columns wide.
133
135
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.
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.
138
176
139
177
140
-
### Fixed column width grid
178
+
####Fixed column width grid
141
179
142
180
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.
143
181
@@ -156,6 +194,20 @@ You can designate each column to have a certain width by using `mdc-layout-grid-
156
194
</div>
157
195
```
158
196
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.
0 commit comments