0
# Grid Structure Classes
1

2
Core CSS classes that form the foundation of the Material Components layout grid system.
3

4
## Grid Container
5

6
The main grid wrapper that provides margins and sets the maximum width.
7

8
```scss { .api }
9
.mdc-layout-grid {
10
  /* Responsive margins and max-width */
11
}
12
```
13

14
**Usage:**
15
```html
16
<div class="mdc-layout-grid">
17
  <!-- Grid content -->
18
</div>
19
```
20

21
**Behavior:**
22
- Applies responsive margins based on screen size
23
- Centers the grid horizontally
24
- Sets maximum width constraints
25
- Uses CSS custom properties for runtime customization
26

27
## Grid Inner Wrapper
28

29
The inner container that manages the flexbox/grid layout for cells.
30

31
```scss { .api }
32
.mdc-layout-grid__inner {
33
  /* Flexbox layout with responsive gutters */
34
}
35
```
36

37
**Usage:**
38
```html
39
<div class="mdc-layout-grid">
40
  <div class="mdc-layout-grid__inner">
41
    <!-- Grid cells go here -->
42
  </div>
43
</div>
44
```
45

46
**Behavior:**
47
- Uses flexbox layout with fallback to CSS Grid where supported
48
- Manages gutters between cells
49
- Allows cells to wrap to new rows
50
- Stretches cells to equal height by default
51

52
## Basic Grid Cell
53

54
The fundamental building block for grid content areas.
55

56
```scss { .api }
57
.mdc-layout-grid__cell {
58
  /* Default 4-column span with responsive behavior */
59
}
60
```
61

62
**Usage:**
63
```html
64
<div class="mdc-layout-grid__cell">
65
  Content goes here
66
</div>
67
```
68

69
**Behavior:**
70
- Defaults to 4-column span on all screen sizes
71
- Includes responsive gutters
72
- Uses box-sizing: border-box
73
- Adapts to available columns (4 on phone, 8 on tablet, 12 on desktop)
74

75
## Complete Structure Example
76

77
```html
78
<div class="mdc-layout-grid">
79
  <div class="mdc-layout-grid__inner">
80
    <div class="mdc-layout-grid__cell">Cell 1</div>
81
    <div class="mdc-layout-grid__cell">Cell 2</div>
82
    <div class="mdc-layout-grid__cell">Cell 3</div>
83
  </div>
84
</div>
85
```
86

87
This creates a responsive grid where:
88
- **Phone**: 3 cells stacked vertically (4 columns available, cells default to 4-column span)
89
- **Tablet**: 2 cells on first row, 1 on second (8 columns available, 4+4 then 4)
90
- **Desktop**: All 3 cells in one row (12 columns available, 4+4+4)
91

92
## Nested Grids
93

94
Grid structures can be nested within cells for complex layouts.
95

96
```html
97
<div class="mdc-layout-grid">
98
  <div class="mdc-layout-grid__inner">
99
    <div class="mdc-layout-grid__cell">
100
      <div class="mdc-layout-grid__inner">
101
        <div class="mdc-layout-grid__cell">Nested cell 1</div>
102
        <div class="mdc-layout-grid__cell">Nested cell 2</div>
103
      </div>
104
    </div>
105
    <div class="mdc-layout-grid__cell">Regular cell</div>
106
  </div>
107
</div>
108
```
109

110
**Nested Grid Behavior:**
111
- Inherits the same column counts as parent grid
112
- Uses same gutter sizes as parent
113
- No additional margins (lives within parent cell)
114
- Can be nested to any depth (though not recommended beyond 2 levels)