Supple CSS: objects.layout tests

.o-layout

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 layouts

1
1
2
3
4

supports .o-layout__fill on cells with no width

1/4
fill
2/12
fill
2/12

supports o-layout__fit and o-layout__fill

shrink to content width
fill remaining space: This is some really long content that should be wrapped when the container is too small.

supports u-columns-X

colspan 2 of 10
colspan 3 of 10
colspan 5 of 10
colspan 2 of 10

supports u-colspan-X

colspan 2
colspan 3
colspan 5
colspan 2

supports u-offset-X

colspan 2, offset 3
colspan 3, offset 1
colspan 5, offset 2
colspan 2

.o-layout--align-inline-center

center-aligns all cells on the inline axis but not their content

1
2
3

.o-layout--align-inline-end

end-aligns all cells on the inline axis but not their content

1
2
3

.o-layout--align-block-center

centers-aligns all cells on the block axis

1
2
3
3

.o-layout--align-block-end

end-aligns all cells on the block axis

1
2
3
3

.o-layout--fill

evenly distribute space between cells without sizing classes or colspan properties

1
2
3
1
2 This is some really long content that should be scrolled when the container is too small.
3
4
5
6

.o-layout--fit

fit all cells to their content

1
2
3
1
2 a bit longer
3
4
5
6

.o-layout--stretch

equal size columns based on the talles cell in the block axis

1
2
line 2
3

also with .layout__cell child elements

1
2
line 2
3

.o-layout__align-inline-center

centers an individual layout cell on the inline axis but not its content

1
2
3: centered cell

.o-layout--gap-X

supports gap (.o-layout--gap-base)

1
2
3
4
5

doesn't apply gaps to nested layouts

1
1
2
2
1
2

correctly aligns gaps within nested layouts

1
1
2
2
1
2

correctly adds gaps with o-layout--fill

1
2
3
1
2
3
4
5
6

correctly adds gaps with o-layout__fit and o-layout__fill

shrink to content width
fill remaining space: This is some really long content that should be wrapped when the container is too small.

correctly adds gaps with u-colspan-X and o-layout__fill

shrink to content width
fill remaining space: This is some really long content that should be wrapped when the container is too small.

Correctly calculates cell alignment when a .o-layout__fit is used in a .o-layout__fit when using .o-layout__cell

Item 1
Item 2
Item 3
Item 4
Item 5