0
# Grid Modifiers
1

2
Modifier classes that change the overall behavior and appearance of the grid container.
3

4
## Fixed Column Width
5

6
Force the grid to use fixed column widths instead of flexible columns.
7

8
```scss { .api }
9
.mdc-layout-grid--fixed-column-width {
10
  /* Sets fixed width columns with configurable column size */
11
}
12
```
13

14
**Usage:**
15
```html
16
<div class="mdc-layout-grid mdc-layout-grid--fixed-column-width">
17
  <div class="mdc-layout-grid__inner">
18
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
19
      Fixed width columns
20
    </div>
21
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
22
      Fixed width columns
23
    </div>
24
  </div>
25
</div>
26
```
27

28
### Default Fixed Column Widths
29
- **Desktop**: 72px per column
30
- **Tablet**: 72px per column  
31
- **Phone**: 72px per column
32

33
### Behavior
34
- Grid container width becomes fixed based on column count and sizes
35
- Useful for layouts that need consistent column proportions
36
- Total width = (columns × column-width) + (gutters × gutter-size) + (margins × 2)
37

38
### Customization via CSS Custom Properties
39
```css
40
.custom-fixed-grid {
41
  --mdc-layout-grid-column-width-desktop: 80px;
42
  --mdc-layout-grid-column-width-tablet: 70px;
43
  --mdc-layout-grid-column-width-phone: 60px;
44
}
45
```
46

47
## Grid Alignment
48

49
Control the horizontal alignment of the entire grid within its container.
50

51
```scss { .api }
52
.mdc-layout-grid--align-left   /* Left-align the grid */
53
.mdc-layout-grid--align-right  /* Right-align the grid */
54
```
55

56
**Default Behavior:** Grid is center-aligned.
57

58
### Left Alignment
59
```html
60
<div class="mdc-layout-grid mdc-layout-grid--align-left">
61
  <div class="mdc-layout-grid__inner">
62
    <div class="mdc-layout-grid__cell">Left-aligned grid</div>
63
  </div>
64
</div>
65
```
66

67
### Right Alignment
68
```html
69
<div class="mdc-layout-grid mdc-layout-grid--align-right">
70
  <div class="mdc-layout-grid__inner">
71
    <div class="mdc-layout-grid__cell">Right-aligned grid</div>
72
  </div>
73
</div>
74
```
75

76
### When Alignment Takes Effect
77
Grid alignment modifiers only have visual effect when:
78
- The grid has a maximum width constraint and the viewport is wider
79
- Using fixed column width that results in a narrower grid than the container
80
- The grid content doesn't fill the full container width
81

82
## Combining Modifiers
83

84
You can combine multiple modifier classes:
85

86
```html
87
<div class="mdc-layout-grid 
88
     mdc-layout-grid--fixed-column-width
89
     mdc-layout-grid--align-right">
90
  <div class="mdc-layout-grid__inner">
91
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
92
      Fixed-width, right-aligned grid
93
    </div>
94
  </div>
95
</div>
96
```
97

98
## Use Cases
99

100
### Fixed Column Width Use Cases
101
- **Data tables** where consistent column sizes are important
102
- **Image galleries** with fixed thumbnail sizes
103
- **Form layouts** with consistent field widths
104
- **Card layouts** where card widths should remain constant
105

106
### Grid Alignment Use Cases
107
- **Landing pages** with centered content blocks
108
- **Sidebar layouts** where main content is left-aligned
109
- **Marketing layouts** with right-aligned call-to-action sections
110

111
## Examples
112

113
### Photo Gallery with Fixed Columns
114
```html
115
<div class="mdc-layout-grid mdc-layout-grid--fixed-column-width">
116
  <div class="mdc-layout-grid__inner">
117
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
118
      <img src="photo1.jpg" alt="Photo 1">
119
    </div>
120
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
121
      <img src="photo2.jpg" alt="Photo 2">
122
    </div>
123
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
124
      <img src="photo3.jpg" alt="Photo 3">
125
    </div>
126
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
127
      <img src="photo4.jpg" alt="Photo 4">
128
    </div>
129
  </div>
130
</div>
131
```
132

133
### Right-Aligned Call-to-Action Section
134
```html
135
<section class="mdc-layout-grid mdc-layout-grid--align-right">
136
  <div class="mdc-layout-grid__inner">
137
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
138
      <h2>Ready to get started?</h2>
139
      <button>Sign Up Now</button>
140
    </div>
141
  </div>
142
</section>
143
```
144

145
### Centered Fixed-Width Form
146
```html
147
<form class="mdc-layout-grid mdc-layout-grid--fixed-column-width">
148
  <div class="mdc-layout-grid__inner">
149
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
150
      <label for="email">Email</label>
151
      <input type="email" id="email" name="email">
152
    </div>
153
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
154
      <label for="password">Password</label>
155
      <input type="password" id="password" name="password">
156
    </div>
157
  </div>
158
</form>
159
```