The WrapGrid

Resize the window to see how the example section layouts change.

Look inside this mdx-document to see the markup for the examples.

Use the WrapGrid component to create a grid layout. The grid will adjust to the available space and wrap the items when there is no more space.

Minimal cell width

There are two variants. One that allows cells shrink to --ddi-space-min-content-width before it wraps the cells. The other variant allows the cells to shrink to half the size of the --ddi-space-min-content-width.

With normal cells

With small cells

Gap

You can add a gap between the cells by setting the gap prop.

With gap