Skip to Content
StylingGap

Gap

Box component supports gap prop for controlling gutters between items.

Flex and Grid components use a gap of 16px by default.

Name

Styles

0
2
4
6
8
10
12
16
20
24
32
40
48
64
80

#

Documentation

#

Usage

01

02

03

04

import { Canvas } from "@/demos/Canvas";
import { Box, Grid } from "@optiaxiom/react";
 
export function App() {
  return (
    <Canvas asChild>
      <Grid gap="24" gridTemplateColumns="2">
        <Box>01</Box>
        <Box>02</Box>
        <Box>03</Box>
        <Box>04</Box>
      </Grid>
    </Canvas>
  );
}

#

Responsive

import { Canvas } from "@/demos/Canvas";
import { Box, Grid } from "@optiaxiom/react";
 
export function App() {
  return (
    <Canvas asChild>
      <Grid gap={["16", "64"]} gridTemplateColumns="2">
        <Box>01</Box>
        <Box>02</Box>
        <Box>03</Box>
        <Box>04</Box>
      </Grid>
    </Canvas>
  );
}
Last updated on
Flex WrapGrid Column