0
# Cell Spanning and Layout
1

2
Classes for controlling how many columns a cell spans across different screen sizes.
3

4
## Universal Span Classes
5

6
Apply the same column span across all screen sizes.
7

8
```scss { .api }
9
.mdc-layout-grid__cell--span-1   /* 1 column */
10
.mdc-layout-grid__cell--span-2   /* 2 columns */
11
.mdc-layout-grid__cell--span-3   /* 3 columns */
12
.mdc-layout-grid__cell--span-4   /* 4 columns (default) */
13
.mdc-layout-grid__cell--span-5   /* 5 columns */
14
.mdc-layout-grid__cell--span-6   /* 6 columns */
15
.mdc-layout-grid__cell--span-7   /* 7 columns */
16
.mdc-layout-grid__cell--span-8   /* 8 columns */
17
.mdc-layout-grid__cell--span-9   /* 9 columns */
18
.mdc-layout-grid__cell--span-10  /* 10 columns */
19
.mdc-layout-grid__cell--span-11  /* 11 columns */
20
.mdc-layout-grid__cell--span-12  /* 12 columns (full width) */
21
```
22

23
**Usage:**
24
```html
25
<div class="mdc-layout-grid__inner">
26
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
27
    Half width on all screens
28
  </div>
29
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
30
    Half width on all screens
31
  </div>
32
</div>
33
```
34

35
## Device-Specific Span Classes
36

37
Control column spans for specific screen sizes.
38

39
```scss { .api }
40
/* Desktop-specific spans (840px+) */
41
.mdc-layout-grid__cell--span-1-desktop
42
.mdc-layout-grid__cell--span-2-desktop
43
/* ... through span-12-desktop */
44

45
/* Tablet-specific spans (600px-839px) */
46
.mdc-layout-grid__cell--span-1-tablet
47
.mdc-layout-grid__cell--span-2-tablet
48
/* ... through span-8-tablet */
49

50
/* Phone-specific spans (0px-599px) */
51
.mdc-layout-grid__cell--span-1-phone
52
.mdc-layout-grid__cell--span-2-phone
53
/* ... through span-4-phone */
54
```
55

56
**Usage:**
57
```html
58
<div class="mdc-layout-grid__cell 
59
     mdc-layout-grid__cell--span-6-desktop
60
     mdc-layout-grid__cell--span-4-tablet
61
     mdc-layout-grid__cell--span-4-phone">
62
  Responsive cell: 6 cols desktop, 4 cols tablet, 4 cols phone
63
</div>
64
```
65

66
## Span Behavior Rules
67

68
### Column Overflow Handling
69
When a span exceeds available columns, the cell behaves as if it spans all available columns:
70

71
```html
72
<!-- On phone (4 columns available) -->
73
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
74
  <!-- Acts as span-4 on phone -->
75
</div>
76
```
77

78
### Default Span Fallback
79
Cells without explicit span classes default to 4-column span:
80

81
```html
82
<div class="mdc-layout-grid__cell">
83
  <!-- Spans 4 columns on all screen sizes -->
84
</div>
85
```
86

87
### Combining Universal and Device-Specific
88
Device-specific classes override universal classes:
89

90
```html
91
<div class="mdc-layout-grid__cell 
92
     mdc-layout-grid__cell--span-12
93
     mdc-layout-grid__cell--span-6-desktop">
94
  <!-- 12 columns on tablet/phone, 6 columns on desktop -->
95
</div>
96
```
97

98
## Common Layout Patterns
99

100
### Equal Width Columns
101
```html
102
<div class="mdc-layout-grid__inner">
103
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Column 1</div>
104
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Column 2</div>
105
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Column 3</div>
106
</div>
107
```
108

109
### Sidebar Layout
110
```html
111
<div class="mdc-layout-grid__inner">
112
  <div class="mdc-layout-grid__cell 
113
       mdc-layout-grid__cell--span-8-desktop
114
       mdc-layout-grid__cell--span-6-tablet
115
       mdc-layout-grid__cell--span-4-phone">
116
    Main content
117
  </div>
118
  <div class="mdc-layout-grid__cell 
119
       mdc-layout-grid__cell--span-4-desktop
120
       mdc-layout-grid__cell--span-2-tablet
121
       mdc-layout-grid__cell--span-4-phone">
122
    Sidebar
123
  </div>
124
</div>
125
```
126

127
### Hero + Cards Layout
128
```html
129
<div class="mdc-layout-grid__inner">
130
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
131
    Hero section (full width)
132
  </div>
133
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Card 1</div>
134
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Card 2</div>
135
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Card 3</div>
136
</div>
137
```
138

139
## Available Columns by Device
140

141
- **Desktop** (840px+): 1-12 columns available
142
- **Tablet** (600px-839px): 1-8 columns available  
143
- **Phone** (0px-599px): 1-4 columns available