Gap
Box component supports gap prop for controlling gutters between items.
Flex and Grid components use a gap of md by default.
Name | Value | Pixels |
|
|---|---|---|---|
xs | 0.5rem | 8px | |
sm | 0.75rem | 12px | |
md | 1rem | 16px | |
lg | 1.5rem | 24px | |
xl | 2rem | 32px | |
0 | 0 | 0 | |
2 | 0.125rem | 2px | |
4 | 0.25rem | 4px | |
6 | 0.375rem | 6px | |
8 | 0.5rem | 8px | |
10 | 0.625rem | 10px | |
12 | 0.75rem | 12px | |
16 | 1rem | 16px | |
20 | 1.25rem | 20px | |
24 | 1.5rem | 24px | |
32 | 2rem | 32px | |
48 | 3rem | 48px | |
64 | 4rem | 64px | |
80 | 5rem | 80px |
#
Documentation
#
#
Usage
#
01
02
03
04
import { Box, Grid } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Grid gap="md" gridTemplateColumns="2">
<Box>01</Box>
<Box>02</Box>
<Box>03</Box>
<Box>04</Box>
</Grid>
</Canvas>
);
}