Grid
Last updated: 3.0.0 (04/07/2024)
The Grid is a component system used to interface directly with the CSS grid
properties. This system includes the Grid
itself, and the Grid.Item
sub-component.
Usage
import { Grid } from "@valence-ui/core";
function MyComponent() {
return (
<Grid
columns={3}
rows={2}
gap={10}
>
<Grid.Item
column="auto"
>
// Grid item children...
</Grid.Item>
// More Grid items...
</Grid>
)
}
Props
Extends GenericGridProps
and PolymorphicLayoutProps
.
No unique props.
GridItemProps
Extends GenericGridItemProps
and PolymorphicLayoutProps
.
Changelog
3.0.0: now uses
rows
andcolumns
props instead oftemplateRows
andtemplateColumns
props; these props can now acceptnumber
types and will create that many1fr
columns.
Last updated
Was this helpful?