Grid

Usage

This component is used in code only. See the Spacing documentation for more information.

The Grid component provides a 12-column fluid grid component that spans its whole parent area with flexible columns and fixed gaps.

The Grid component is fully versatile. It allows creating equal divisions of 2, 3, 4, and 6 columns and to use different gap sizes. There are some special layouts where you need to preserve this versatility and at the same time separate related or closely-related content in different columns. For those layouts, the system allows you to use the columns you need for closely related areas and nest a new 12-column grid to change its gap size.

The purpose of a grid system is to systematize how information is organized in order to rationalize our designs. Grids add a set of guides for scale and placement, they are an invisible scaffolding that provides coherence to our designs.

Use the Grid to define a layout that maintains consistent element positioning and sizing across views.

Responsiveness

Grid and grid-item use media queries for responsive behavior. This allows elements inside the grid to adapt to the size of the viewport, enabling a more dynamic and flexible design.

Gap

To set a gap at specific breakpoints, pass an object to the gap prop. Gap supports 4 values that correspond with our spacing tokens: small, medium, large, xlarge.

Grid-item

To set a grid-item's column-span at specific breakpoints, pass an object with the configuration to the column-span prop.

Available breakpoints

Examples

Live Preview

Props

Grid

GridItem

Slots

Grid

GridItem