Grid

CSS grid wrapper. Either set a fixed number of columns (or a raw grid-template-columns string), or set minChildWidth to auto-fill as many columns as fit.

One

Two

Three


import { Grid } from '@gg-software/ui';
 
<Grid columns={3} gap="sm">
    <Card size="small">One</Card>
    <Card size="small">Two</Card>
    <Card size="small">Three</Card>
</Grid>
 
// responsive: as many 220px+ columns as fit
<Grid minChildWidth={220} gap="md">
    {cards}
</Grid>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	content rendered inside the component
`as`	`ElementType`	—
`columns`	`string \| number`	`12`	number of equal columns, or a raw grid-template-columns string
`minChildWidth`	`string \| number`	—	auto-fill columns at least this wide (overrides `columns`)
`gap`	`SpaceValue`	`md`
`align`	`AlignItems`	—
`justify`	`JustifyItems`	—
`className`	`string`	—
`style`	`CSSProperties`	—

* required · generated from packages/ui/src/layout/Grid/Grid.tsx