Grid

A responsive, mobile first, fluid system that appropriately scales 12 columns as the device or viewport size increases

Column Layout

Use rows and columns to lay out content by specifying equal-widths for all columns

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Justify

Define x-axis alignment and distribute space for all columns per row. Containers may have set widths or may be flexible with max-widths defined. This applies to all columns with left as the default value.

Left

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Center

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox
Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Around

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Between

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Align

Define y-axis alignment per row and distribute space across all columns per row. This applies to all columns with stretch as the default value.

Top

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Bottom

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Middle

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Stretch

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Gutter

Defines gutter size for all columns on a row and maintains gutter size by breakpoint. This applies to all columns. When this value is not set, default sizes are used.

Default

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

xxs

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

None

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Vertical

Defines direction for items in a container for all columns of a row. This applies to all columns. Default is horizontal.

Default

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Vertical

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Wrap/Nowrap

Wrapping columns is the default; however, it is possible to disable or enable column wrapping of a row with the ability to set values based on breakpoint. The disable value also invokes overflow scrolling. This applies to all columns.

Wrap (default)

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Nowrap (scroll)

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Span

Controls column width by overriding columns value for a specific column or columns. Span will override values from columns.

12 cols

Copy to clipboard
View source in repository View in repository
View in sandbox

Span 2

Copy to clipboard
View source in repository View in repository
View in sandbox

Span 4

Copy to clipboard
View source in repository View in repository
View in sandbox

Offset

Adds empty space (or columns) to left or right of a column, either to the left (offset-left) or right (offset-right). This can be applied to an individual column.

Offset Left

Copy to clipboard
View source in repository View in repository
View in sandbox

Offset Right

Copy to clipboard
View source in repository View in repository
View in sandbox

Align Self

Overrides row-level alignment for a column. This can be applied to an individual column.

Copy to clipboard
View source in repository View in repository
View in sandbox

Nested Grids

Defines nested columns (also known as isRow).

Simple

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Complex

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Low-vision users should be able to increase the size of the text by up to 200 percent without breaking the layout
  • Use list markup for content layout. List markup allow contents to be structured which makes it easier for assistive technologies

This component has compliance with following WCAG guidelines:

  • WCAG SC 1.3.2: Meaningful Sequence: Cedar Design System does not provide for Flexbox’s order property. Reverse order or reordering of items is not allowed. Content must be presented in a correct reading sequence to comply with accessibility standards