New
Verified
Homecomponentsstructural
AutoGrid
A container to lay out items in a responsive grid.
Use an AutoGrid to layout items both vertically and horizontally. It decides the optimal number of items that can fit a row based on an item's minimum allowed width and the available space.
Spacing
Use the space property to specify the equal spacing between items in both vertical and horizontal direction.
Use the rowSpace property to specify the spacing between the rows.
Use the columnSpace property to specify the spacing between the columns.
Filling or Fitting
Use the type property to specify whether the grid item fills only its own width or expands to fit the available space.
fill
fill
fill
fill
fit
fit
fit
fit
Minimum Item Width
Use the minItemWidth property to suggest the smallest size an item can be.
For example, a grid displaying ProCards could use a minItemWidth of
400px if below that size the cards are too squished and hence not readable.
Examples
A typical use of AutoGrid is to display a tile of cards.
Verified
Clara Delcroix
Popular
Clara Delcroix
Verified
Popular
Clara Delcroix
API
minItemWidth
Required
number
children
Required
ReactNode
as
div
ol
ul
section
type
fill
fit
spacing
columnSpacing
rowSpacing
data
DataAttributeMap