Auto Grid

Import#

import { AutoGrid } from '@volue/wave-react';

Background#

Auto Grid creates responsive layout with automatically-placed and flexible children. It is responsive based on the size of its container and provided min (and optionally max) value. By setting these constraints, you empower the browser to make the right decision about the layout given the available space. Each column will resize at the same rate, and items will begin to break to a new row if the width reaches the min value.

Auto Grid fits into any container and reconfigures automatically thanks to CSS grid’s auto-fit() and minmax() functions, without any need for viewport @media queries. With Auto Grid you're encouraged to think about the content first (it's minimum and maximum size), not the viewport or the device size.

Examples#

Default configuration#

Narrow container#

Configuring min#

In the example below it is specified that each grid item must be of a minimum size of 6rem. AutoGrid will squeeze in as many equal width (greater than 6rem), flexible sized grid items as it can to fit inside.

Configuring max#

Optional max property gives you a bit more control over the automatic distribution of columns. Say you want two columns at larger screen sizes, nothing more, while keeping the minimum size of 6rem. The grid items will grow to reach the maximum size when there is enough space.

If you need at most 3 columns, you can set max to 33.3333% or provide a simple math expression calc(100% / 3).

Alignment#

alignItems="center"#

alignItems="end"#

API Reference#