Grid

Grid has mobile first design and consists of 12 columns across 5 different media breakpoints XS (default) / S / M / L / XL.

Example

Variants

Column sizes

Start by creating a wrapper with a class of <Grid />. Then add some <GridCol /> elements. A column takes all space available by default, but shrinks to accomodate other columns as well in one row, unless they are so wide they won't fit in.

To define a column size number 1-12 or one of [shrink/fill/auto] can be used.

• 1-12 fixed width
• shrink column takes the least amount of space available
• fill column takes all the space available and does not shrink to accomodate other columns
• auto behaves the same as <GridCol />. this class is needed for responsive behavior explanied later on

Responsive behavior

Breakpoints are one of [XS (default) / S / M / L / XL]. There is no need to specify the xs breakpoint, because it's default by definition of mobile first philosophy.

Basic column behavior gets applied on any element with class containing <GridCol />. Therefore a <GridCol size={{ m: 5 }} /> will automatically behave as size={12} on viewports smaller than M.

Offsets

Container

A <Container /> element applies padding and max width and keeps the grid centered.

Props

string

"div"

getResponsivePropType(oneOfType([number, oneOf(["center"])]))

getResponsivePropType(
  oneOfType([number, oneOf(["shrink", "fill", "auto"])])
)

string

"div"

This component does not have any prop types

Accessibility

The <Grid /> and <GridCols /> components are purely presentational and do not carry any semantic meaning.

When using <Grid /> and <GridCols /> for listing items (products, articles, etc...), it is recommended to take advantage of the tag property and make into an unordered list: