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
20
24
32
40
48
64
80

#

Documentation

#

Usage

01
02
03
04
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Grid } from "@optiaxiom/react";
 
export function App() {
  return (
    <Grid gap="24" gridTemplateColumns="2" w="full">
      <DemoBox>01</DemoBox>
      <DemoBox>02</DemoBox>
      <DemoBox>03</DemoBox>
      <DemoBox>04</DemoBox>
    </Grid>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#

Responsive

import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Grid } from "@optiaxiom/react";
 
export function App() {
  return (
    <Grid gap={["16", "64"]} gridTemplateColumns="2" w="full">
      <DemoBox>01</DemoBox>
      <DemoBox>02</DemoBox>
      <DemoBox>03</DemoBox>
      <DemoBox>04</DemoBox>
    </Grid>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.purple"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}
Last updated on
Flex WrapGrid Column