Grid
Use Grid
component to place items in a grid using equal width columns.
#
Documentation
#
#
Usage
#
Use gridTemplateColumns
prop to create equally sized columns in a grid layout.
01
02
03
04
05
06
07
import { Grid } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Grid gridTemplateColumns="3">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
</Grid>
</Canvas>
);
}
#
Gap
#
Use gap
prop to control the gap between grid items.
01
02
03
04
import type { ComponentPropsWithoutRef } from "react";
import { Box, Grid } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App({
gap = "16",
}: Pick<ComponentPropsWithoutRef<typeof Grid>, "gap">) {
return (
<Canvas>
<Grid gap={gap} gridTemplateColumns="2">
<Box>01</Box>
<Box>02</Box>
<Box>03</Box>
<Box>04</Box>
</Grid>
</Canvas>
);
}
#
Spanning columns
#
Use the gridColumn
prop on children to make them span across multiple columns.
01
02
03
04
05
06
07
import { Box, Grid } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Grid gridTemplateColumns="3">
<Box>01</Box>
<Box>02</Box>
<Box>03</Box>
<Box gridColumn="2">04</Box>
<Box>05</Box>
<Box>06</Box>
<Box gridColumn="2">07</Box>
</Grid>
</Canvas>
);
}
#
Related
#
Box
Box is the base component for all our other components and provides a convenient way to use our design tokens and set element styles without having to write any custom CSS.
Flex
Use Flex component to stack items vertically or horizontally.
#
Props
#
#
Grid
#
Supports all Box props in addition to its own. Renders a <div>
element.
Prop |
---|
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false | true |
className string |
#
Changelog
#
#
0.1.0
#
- Added component