0
# Sass Variables and Customization
1
2
Configuration variables and CSS custom properties for customizing the grid system.
3
4
## Configuration Maps
5
6
### $breakpoints
7
8
Defines the responsive breakpoints for each device type.
9
10
```scss { .api }
11
$breakpoints: (
12
desktop: 840px,
13
tablet: 600px,
14
phone: 0px,
15
) !default;
16
```
17
18
**Usage:**
19
```scss
20
@use "@material/layout-grid" with (
21
$breakpoints: (
22
desktop: 1024px,
23
tablet: 768px,
24
phone: 0px,
25
)
26
);
27
```
28
29
### $columns
30
31
Specifies the number of columns available for each device type.
32
33
```scss { .api }
34
$columns: (
35
desktop: 12,
36
tablet: 8,
37
phone: 4,
38
) !default;
39
```
40
41
**Usage:**
42
```scss
43
@use "@material/layout-grid" with (
44
$columns: (
45
desktop: 16, // More columns on desktop
46
tablet: 8,
47
phone: 4,
48
)
49
);
50
```
51
52
### $default-margin
53
54
Default margin values around the grid for each device type.
55
56
```scss { .api }
57
$default-margin: (
58
desktop: 24px,
59
tablet: 16px,
60
phone: 16px,
61
) !default;
62
```
63
64
**Usage:**
65
```scss
66
@use "@material/layout-grid" with (
67
$default-margin: (
68
desktop: 32px,
69
tablet: 24px,
70
phone: 16px,
71
)
72
);
73
```
74
75
### $default-gutter
76
77
Default gutter size between grid cells for each device type.
78
79
```scss { .api }
80
$default-gutter: (
81
desktop: 24px,
82
tablet: 16px,
83
phone: 16px,
84
) !default;
85
```
86
87
**Usage:**
88
```scss
89
@use "@material/layout-grid" with (
90
$default-gutter: (
91
desktop: 32px,
92
tablet: 20px,
93
phone: 12px,
94
)
95
);
96
```
97
98
### $column-width
99
100
Column widths used with fixed-column-width modifier.
101
102
```scss { .api }
103
$column-width: (
104
desktop: 72px,
105
tablet: 72px,
106
phone: 72px,
107
) !default;
108
```
109
110
**Usage:**
111
```scss
112
@use "@material/layout-grid" with (
113
$column-width: (
114
desktop: 80px,
115
tablet: 70px,
116
phone: 60px,
117
)
118
);
119
```
120
121
## Single Value Variables
122
123
### $default-column-span
124
125
Default column span for cells without explicit span classes.
126
127
```scss { .api }
128
$default-column-span: 4 !default;
129
```
130
131
**Usage:**
132
```scss
133
@use "@material/layout-grid" with (
134
$default-column-span: 6
135
);
136
```
137
138
### $max-width
139
140
Maximum width constraint for the grid container.
141
142
```scss { .api }
143
$max-width: null !default;
144
```
145
146
**Usage:**
147
```scss
148
@use "@material/layout-grid" with (
149
$max-width: 1200px
150
);
151
```
152
153
## CSS Custom Properties
154
155
Runtime customization through CSS custom properties (CSS variables).
156
157
### Margin Properties
158
159
```scss { .api }
160
--mdc-layout-grid-margin-desktop /* Override desktop margins */
161
--mdc-layout-grid-margin-tablet /* Override tablet margins */
162
--mdc-layout-grid-margin-phone /* Override phone margins */
163
```
164
165
**Usage:**
166
```css
167
.custom-grid {
168
--mdc-layout-grid-margin-desktop: 40px;
169
--mdc-layout-grid-margin-tablet: 30px;
170
--mdc-layout-grid-margin-phone: 20px;
171
}
172
```
173
174
### Gutter Properties
175
176
```scss { .api }
177
--mdc-layout-grid-gutter-desktop /* Override desktop gutters */
178
--mdc-layout-grid-gutter-tablet /* Override tablet gutters */
179
--mdc-layout-grid-gutter-phone /* Override phone gutters */
180
```
181
182
**Usage:**
183
```css
184
.tight-grid {
185
--mdc-layout-grid-gutter-desktop: 16px;
186
--mdc-layout-grid-gutter-tablet: 12px;
187
--mdc-layout-grid-gutter-phone: 8px;
188
}
189
```
190
191
### Column Width Properties
192
193
```scss { .api }
194
--mdc-layout-grid-column-width-desktop /* Override desktop column width */
195
--mdc-layout-grid-column-width-tablet /* Override tablet column width */
196
--mdc-layout-grid-column-width-phone /* Override phone column width */
197
```
198
199
**Usage:**
200
```css
201
.wide-columns {
202
--mdc-layout-grid-column-width-desktop: 100px;
203
--mdc-layout-grid-column-width-tablet: 80px;
204
--mdc-layout-grid-column-width-phone: 60px;
205
}
206
```
207
208
## Complete Customization Examples
209
210
### Compile-Time Customization
211
212
```scss
213
// Custom configuration at compile-time
214
@use "@material/layout-grid" with (
215
$breakpoints: (
216
desktop: 1200px,
217
tablet: 768px,
218
phone: 0px,
219
),
220
$columns: (
221
desktop: 16,
222
tablet: 12,
223
phone: 6,
224
),
225
$default-margin: (
226
desktop: 40px,
227
tablet: 30px,
228
phone: 20px,
229
),
230
$default-gutter: (
231
desktop: 32px,
232
tablet: 24px,
233
phone: 16px,
234
),
235
$max-width: 1400px
236
);
237
```
238
239
### Runtime Customization
240
241
```css
242
/* Theme variations using CSS custom properties */
243
.theme-compact {
244
--mdc-layout-grid-margin-desktop: 16px;
245
--mdc-layout-grid-margin-tablet: 12px;
246
--mdc-layout-grid-margin-phone: 8px;
247
--mdc-layout-grid-gutter-desktop: 16px;
248
--mdc-layout-grid-gutter-tablet: 12px;
249
--mdc-layout-grid-gutter-phone: 8px;
250
}
251
252
.theme-spacious {
253
--mdc-layout-grid-margin-desktop: 48px;
254
--mdc-layout-grid-margin-tablet: 32px;
255
--mdc-layout-grid-margin-phone: 24px;
256
--mdc-layout-grid-gutter-desktop: 40px;
257
--mdc-layout-grid-gutter-tablet: 28px;
258
--mdc-layout-grid-gutter-phone: 20px;
259
}
260
261
.theme-fixed-narrow {
262
--mdc-layout-grid-column-width-desktop: 60px;
263
--mdc-layout-grid-column-width-tablet: 55px;
264
--mdc-layout-grid-column-width-phone: 50px;
265
}
266
```
267
268
### Mixed Customization
269
270
```scss
271
// Compile-time base configuration
272
@use "@material/layout-grid" with (
273
$max-width: 1200px,
274
$default-column-span: 6
275
);
276
277
// Import the configured grid
278
@use "@material/layout-grid/mdc-layout-grid";
279
```
280
281
```css
282
/* Runtime theme switching */
283
[data-theme="dark"] {
284
--mdc-layout-grid-margin-desktop: 32px;
285
--mdc-layout-grid-gutter-desktop: 32px;
286
}
287
288
[data-theme="light"] {
289
--mdc-layout-grid-margin-desktop: 24px;
290
--mdc-layout-grid-gutter-desktop: 24px;
291
}
292
293
@media (max-width: 599px) {
294
[data-theme="mobile"] {
295
--mdc-layout-grid-margin-phone: 12px;
296
--mdc-layout-grid-gutter-phone: 12px;
297
}
298
}
299
```
300
301
## Default Values Reference
302
303
| Variable | Desktop | Tablet | Phone |
304
|----------|---------|--------|-------|
305
| Breakpoint | 840px+ | 600px-839px | 0px-599px |
306
| Columns | 12 | 8 | 4 |
307
| Margin | 24px | 16px | 16px |
308
| Gutter | 24px | 16px | 16px |
309
| Column Width | 72px | 72px | 72px |
310
311
**Other Defaults:**
312
- Default column span: 4
313
- Maximum width: none (null)