Grid tests

Documentation  /  Source code
All associated settings ready for testing: test/src/assets/scss/_settings.scss → Grid (Local)

.l-grid__item

1 column.
Item 1
  • Canvas
  • Test subject

.l-grid__item--6-col

2 columns.
Item 1
Item 2
  • Canvas
  • Test subject

.l-grid__item--4-col

3 columns.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid__item--3-col

4 columns.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid__item--2-col

6 columns.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
  • Canvas
  • Test subject

.l-grid--equal-height

Equal Height—cells on the same row are equal in height regardless of content.

Item 1a

Item 1b

Item 1c

Item 2
Item 3
Item 4
Item 5

Item 6a

Item 6b

Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutterless

Gutterless—both horizontally and vertically.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-2x-small

Horizontal gutter size 2x-small.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-x-small

Horizontal gutter size x-small.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-small

Horizontal gutter size small.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-base

Horizontal gutter size base.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-large

Horizontal gutter size large.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-x-large

Horizontal gutter size x-large.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-2x-large

Horizontal gutter size 2x-large.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-3x-large

Horizontal gutter size 3x-large.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-4x-large

Horizontal gutter size 4x-large.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-5x-large

Horizontal gutter size 5x-large.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-horizontal-6x-large

Horizontal gutter size 6x-large.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--gutter-vertical-2x-small

Vertical gutter size 2x-small (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-vertical-x-small

Vertical gutter size x-small (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-vertical-small

Vertical gutter size small (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-vertical

Vertical gutter size base (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-vertical-large

Vertical gutter size large (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-vertical-x-large

Vertical gutter size x-large (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-vertical-2x-large

Vertical gutter size 2x-large (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-vertical-3x-large

Vertical gutter size 3x-large (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-vertical-4x-large

Vertical gutter size 4x-large (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-vertical-5x-large

Vertical gutter size 5x-large (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--gutter-vertical-6x-large

Vertical gutter size 6x-large (horizontal gutters are set independently).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
  • Canvas
  • Test subject

.l-grid--align-middle

Middle alignment for all grid items in a grid container.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid--align-bottom

Bottom alignment for all grid items in a grid container.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid--align-bottom / .l-grid--align-center

Bottom center alignment for all grid items in a grid container.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid--align-center

Center alignment for all grid items in a grid container.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid--align-right

Right alignment for all grid items in a grid container.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid--align-right / .l-grid--align-middle

Middle right alignment for all grid items in a grid container.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid--align-right / .l-grid--align-bottom

Bottom right alignment for all grid items in a grid container.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid__item--align-middle

Middle alignment for a direct child of a grid item.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid__item--align-bottom

Bottom alignment for a direct child of a grid item.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid__item--align-center

Center alignment for a direct child of a grid item.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid__item--align-right

Right alignment for a direct child of a grid item.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid__item--auto-margin-center

Auto-margin center alignment for a grid item.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid__item--auto-margin-right

Auto-margin right alignment for a grid item.
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject

.l-grid--space-between

Space between.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid--space-around

Space around.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid--nowrap

No wrap.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
  • Canvas
  • Test subject

.l-grid__item--fill

Fill, grid item takes up the remaining space of a grid container.
Item 1
Item 2
Item 3
  • Canvas
  • Test subject

.l-grid--fit

Fit, all grid items are equal width.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
  • Canvas
  • Test subject

N/A

Nested grids.
Item 1
Item 1
Item 2
Item 3
Item 4
  • Canvas
  • Test subject