0
# Material Components Layout Grid
1

2
Material Design's responsive grid system implemented as a CSS-only layout component. Provides a column-variate grid layout with 12 columns on desktop, 8 columns on tablet, and 4 columns on phone, following Material Design principles.
3

4
## Package Information
5

6
- **Package Name**: @material/layout-grid
7
- **Package Type**: npm
8
- **Language**: SCSS/CSS
9
- **Installation**: `npm install @material/layout-grid`
10

11
## Core Imports
12

13
```scss
14
@use "@material/layout-grid";
15
```
16

17
Import complete CSS classes:
18
```scss
19
@use "@material/layout-grid/mdc-layout-grid";
20
```
21

22
Import mixins and variables separately:
23
```scss
24
@use "@material/layout-grid" as grid;
25
```
26

27
## Basic Usage
28

29
```html
30
<div class="mdc-layout-grid">
31
  <div class="mdc-layout-grid__inner">
32
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
33
      Content for 4 columns
34
    </div>
35
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
36
      Content for 4 columns
37
    </div>
38
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
39
      Content for 4 columns
40
    </div>
41
  </div>
42
</div>
43
```
44

45
```scss
46
@use "@material/layout-grid/mdc-layout-grid";
47
```
48

49
## Architecture
50

51
The layout grid system consists of three core components:
52

53
- **Grid Container** (`mdc-layout-grid`): The main wrapper that defines grid margins and maximum width
54
- **Grid Inner** (`mdc-layout-grid__inner`): The flex/grid container that manages cell layout and gutters
55
- **Grid Cells** (`mdc-layout-grid__cell`): Individual content areas that can span multiple columns
56

57
The system uses responsive breakpoints:
58
- **Desktop**: 840px+, 12 columns, 24px margins/gutters
59
- **Tablet**: 600px-839px, 8 columns, 16px margins/gutters  
60
- **Phone**: 0px-599px, 4 columns, 16px margins/gutters
61

62
## Capabilities
63

64
### Grid Structure Classes
65

66
Core CSS classes for implementing the responsive grid layout.
67

68
```scss { .api }
69
.mdc-layout-grid             // Main grid container
70
.mdc-layout-grid__inner      // Inner grid wrapper
71
.mdc-layout-grid__cell       // Basic grid cell
72
```
73

74
[Grid Structure Classes](./grid-structure.md)
75

76
### Cell Spanning and Layout
77

78
Classes for controlling cell width across different screen sizes.
79

80
```scss { .api }
81
.mdc-layout-grid__cell--span-{1-12}                    // Span classes
82
.mdc-layout-grid__cell--span-{1-12}-{desktop|tablet|phone}  // Device-specific spans
83
```
84

85
[Cell Spanning and Layout](./cell-spanning.md)
86

87
### Cell Alignment and Ordering
88

89
Classes for controlling cell vertical alignment and visual order.
90

91
```scss { .api }
92
.mdc-layout-grid__cell--align-{top|middle|bottom}  // Vertical alignment
93
.mdc-layout-grid__cell--order-{1-12}               // Visual ordering
94
```
95

96
[Cell Alignment and Ordering](./cell-alignment.md)
97

98
### Grid Modifiers
99

100
Modifier classes for customizing grid behavior and alignment.
101

102
```scss { .api }
103
.mdc-layout-grid--fixed-column-width  // Fixed width columns
104
.mdc-layout-grid--align-{left|right}  // Grid alignment
105
```
106

107
[Grid Modifiers](./grid-modifiers.md)
108

109
### Sass Mixins
110

111
Programmatic mixins for custom grid implementations.
112

113
```scss { .api }
114
@mixin layout-grid($size, $margin, $max-width: null);
115
@mixin inner($size, $margin, $gutter);
116
@mixin cell($size, $default-span, $gutter);
117
```
118

119
[Sass Mixins](./sass-mixins.md)
120

121
### Sass Variables and Customization
122

123
Configuration variables and CSS custom properties for theming.
124

125
```scss { .api }
126
$breakpoints     // Responsive breakpoints map
127
$columns         // Column counts per device
128
$default-margin  // Default margin values
129
$default-gutter  // Default gutter values
130
```
131

132
[Sass Variables and Customization](./sass-variables.md)