Grid & GridItem

Grid

A grid can be used to align content into a symmetrical grid of user defined sizes and dimensions.

Hint:

Try combining the Grid component with multiple Card components for lists of content that is too complex to fit in an actual list.

Properties

Prop	Type	Default
`columns`	`any`	-
`cols`	`number \| GridColumnMap`	-
`minMax`	`number`	-
`children`	`any`	-
`autoFit`	`boolean`	-

Grid Item

The GridItem component can be used to add default styles to content within the Grid component. This is not required to display content within the grid component, but adds reasonable default styling and size properties.

Properties

Prop	Type	Default
`children`	`any`	-
`background`	`boolean`	-
`center`	`boolean`	-

Example

<Grid minMax={200}>
  <GridItem>Plain</GridItem>
  <GridItem background>With background</GridItem>
  <GridItem center background>
    Centered
  </GridItem>
</Grid>

Output

Plain

With background

Centered

Grid & GridItem

Grid

Properties

Grid Item

Properties

Example

Output

On this page

docs

demos

funding