SUIT CSS: Grid component tests

.Grid

renders cells at full-width by default

1
2

removes inter-cell whitespace

1
2
3
4

handles overflowing elements

              This is some really long content that should be scrolled when the container is too small.

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

Level 1
Level 2
Level 2
Level 2

supports u-sizeFill on cells with no width

1/4
auto
2/12
auto
2/12

supports u-sizeFit and u-sizeFill

shrink to content width
u-sizeFill

.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. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.
3

.Grid-cell--center

centers an individual grid cell but not its content

1
2
3: centered cell

.Grid--withGutter

supports gutters

1
2
3
4

doesn't apply gutters to nested grids

Level 1
Level 2
Level 2
Level 1
Level 2
Level 2

correctly aligns gutters when using offsets (requires suitcss-utils-offset)

1
2
3
1

correctly aligns gutters within nested grids

Level 1
Level 2
Level 2
Level 1
Level 2
Level 2

correctly adds gutters with Grid--fit

1
2
3
1
2