Grid
tests
.Grid
renders cells at full-width by default
1
2
removes inter-cell whitespace by default
1
2
3
4
automatically wraps cells across multiple lines when they don't fit a single row
1
2
3
4
5
6
7
8
arranges cells of different heights into clear rows
1
2
3
4
5
6
7
8
supports nested grids
1
Nested 1
Nested 2
Nested 3
supports u-sizeFill on cells with no width
1/4
auto
2/12
auto
2/12
.Grid--alignCenter
center-aligns all grid cells but not their content
1
2
3
.Grid--alignRight
right-aligns all grid cells but not their content
1
2
3
.Grid--alignMiddle
middle-aligns all grid cells
1
2
3
4
.Grid--alignBottom
bottom-aligns all grid cells
1
2
3
4
.Grid--fit
evenly distribute space between cells without sizing classes
1
2
3
1
2
3
4
5
6
.Grid--equalHeight
equal height columns based on tallest Grid-cell
1
2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu.
3
.Grid-cell--center
centers an individual grid cell but not its content
1
2
3: centered cell
.Grid--withGutter[Sm|Lg]
supports gutters of multiple sizes
1
2
3
4
1
2
3
4
1
2
3
4
doesn't apply gutters to nested grids
1
Nested 1
Nested 2
2
Nested 1
Nested 2
correctly aligns gutters within nested grids
1
Nested 1
Nested 2
2
Nested 1
Nested 2
correctly aligns gutters on cells that have been reordered
1
2
3
correctly adds gutters with Grid--fit
1
2
3
1
2