0
# Cell Alignment and Ordering
1

2
Classes for controlling cell vertical alignment and visual order within the grid.
3

4
## Vertical Alignment
5

6
Control how cells align vertically within their row.
7

8
```scss { .api }
9
.mdc-layout-grid__cell--align-top     /* Align to top of row */
10
.mdc-layout-grid__cell--align-middle  /* Center vertically in row */
11
.mdc-layout-grid__cell--align-bottom  /* Align to bottom of row */
12
```
13

14
**Default Behavior:** Cells stretch to fill the full height of their row.
15

16
### Top Alignment
17
```html
18
<div class="mdc-layout-grid__inner">
19
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top">
20
    <p>Short content</p>
21
  </div>
22
  <div class="mdc-layout-grid__cell">
23
    <p>Much longer content that makes this cell taller and determines the row height. This cell will stretch to its natural height.</p>
24
  </div>
25
</div>
26
```
27

28
### Middle Alignment
29
```html
30
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle">
31
  Content centered vertically in the row
32
</div>
33
```
34

35
### Bottom Alignment
36
```html
37
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom">
38
  Content aligned to bottom of row
39
</div>
40
```
41

42
## Visual Ordering
43

44
Change the visual order of cells without affecting the DOM order.
45

46
```scss { .api }
47
.mdc-layout-grid__cell--order-1   /* First in visual order */
48
.mdc-layout-grid__cell--order-2   /* Second in visual order */
49
.mdc-layout-grid__cell--order-3   /* Third in visual order */
50
.mdc-layout-grid__cell--order-4   /* Fourth in visual order */
51
.mdc-layout-grid__cell--order-5   /* Fifth in visual order */
52
.mdc-layout-grid__cell--order-6   /* Sixth in visual order */
53
.mdc-layout-grid__cell--order-7   /* Seventh in visual order */
54
.mdc-layout-grid__cell--order-8   /* Eighth in visual order */
55
.mdc-layout-grid__cell--order-9   /* Ninth in visual order */
56
.mdc-layout-grid__cell--order-10  /* Tenth in visual order */
57
.mdc-layout-grid__cell--order-11  /* Eleventh in visual order */
58
.mdc-layout-grid__cell--order-12  /* Twelfth in visual order */
59
```
60

61
### Basic Ordering Example
62
```html
63
<div class="mdc-layout-grid__inner">
64
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-3">
65
    Third visually (first in DOM)
66
  </div>
67
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1">
68
    First visually (second in DOM)
69
  </div>
70
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2">
71
    Second visually (third in DOM)
72
  </div>
73
</div>
74
```
75

76
### Responsive Ordering
77
Use multiple order classes for different responsive behaviors:
78

79
```html
80
<div class="mdc-layout-grid__cell 
81
     mdc-layout-grid__cell--order-1
82
     mdc-layout-grid__cell--span-6-desktop
83
     mdc-layout-grid__cell--span-8-tablet">
84
  Important content - shows first on all devices
85
</div>
86
<div class="mdc-layout-grid__cell 
87
     mdc-layout-grid__cell--order-2
88
     mdc-layout-grid__cell--span-6-desktop
89
     mdc-layout-grid__cell--span-8-tablet">
90
  Secondary content - shows second
91
</div>
92
```
93

94
## Accessibility Considerations
95

96
**Important:** Visual reordering affects screen readers and keyboard navigation. The `order` property changes visual presentation but not DOM order.
97

98
### Screen Reader Impact
99
Screen readers follow DOM order, not visual order:
100
```html
101
<!-- Screen readers read: "First", "Second", "Third" -->
102
<!-- Visual order shows: "Third", "First", "Second" -->
103
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2">First</div>
104
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-3">Second</div>
105
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1">Third</div>
106
```
107

108
### Keyboard Navigation Impact
109
Tab order follows DOM order, not visual order, which can confuse keyboard users.
110

111
### Best Practices
112
- Use visual ordering sparingly
113
- Ensure DOM order makes logical sense for screen readers
114
- Test with keyboard navigation
115
- Consider whether content restructuring would be better than visual reordering
116

117
## Combining Alignment and Ordering
118

119
You can combine alignment and ordering classes:
120

121
```html
122
<div class="mdc-layout-grid__cell 
123
     mdc-layout-grid__cell--align-middle
124
     mdc-layout-grid__cell--order-2
125
     mdc-layout-grid__cell--span-6">
126
  Centered vertically, second in visual order, half width
127
</div>
128
```
129

130
## Advanced Layout Examples
131

132
### Card Layout with Ordering
133
```html
134
<div class="mdc-layout-grid__inner">
135
  <div class="mdc-layout-grid__cell 
136
       mdc-layout-grid__cell--span-8
137
       mdc-layout-grid__cell--order-2">
138
    <article>Main article content</article>
139
  </div>
140
  <div class="mdc-layout-grid__cell 
141
       mdc-layout-grid__cell--span-4
142
       mdc-layout-grid__cell--order-1
143
       mdc-layout-grid__cell--align-top">
144
    <aside>Sidebar that appears first visually</aside>
145
  </div>
146
</div>
147
```
148

149
### Vertically Aligned Button Row
150
```html
151
<div class="mdc-layout-grid__inner">
152
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
153
    <h2>Section Title</h2>
154
    <p>Section content with variable height...</p>
155
  </div>
156
  <div class="mdc-layout-grid__cell 
157
       mdc-layout-grid__cell--span-4
158
       mdc-layout-grid__cell--align-middle">
159
    <button>Action Button</button>
160
  </div>
161
</div>
162
```