Grid

Grid is a Box component with display="grid" set by default. It allows for 2-dimensional layouts and alignment of child components, making it a powerful layout tool in the Kuma UI toolkit.

Import

import { Grid } from "@kuma-ui/core";

Usage

const GridExample = () => {
  return (
    <Grid gridTemplateColumns="repeat(2, 1fr)" gap={6}>
      <Box bg="teal" height="80px" />
      <Box bg="teal" height="80px" />
      <Box bg="teal" height="80px" />
      <Box bg="teal" height="80px" />
    </Grid>
  );
};

Props

Grid accepts all the same props as Box, plus additional props for controlling grid-specific styling.

Flex HStack