Overview

About

Getting Started

Layout

Box

Flex

Grid

Components

Accordion

Badge

Button

Checkbox

Panel

Portal

Progress Bar

Select

Skeleton

Separator

Switch

Theme

Tooltip

Properties

Color

Margin

Padding

Radius

Size

Spacing

Grid Component

A layout component that uses CSS Grid for two-dimensional layouts with configurable columns, rows, gap, flow, justification, and alignment.
Item 1
Item 2
Item 3
import { Grid } from "@locus-ui/components";
<Grid columns="3" gap="4" align="center">  <Box px="2" py="1" className="border">Item 1</Box>  <Box px="2" py="1" className="border">Item 2</Box>  <Box px="2" py="1" className="border">Item 3</Box></Grid>

View Source

Anatomy

Import the component:

Anatomy

import { Grid } from "@locus-ui/components";
<Grid />

Examples

Gaps

The gap prop controls the spacing between grid items using predefined scale values 0 through 8.

0

Item 1
Item 2

1

Item 1
Item 2

2

Item 1
Item 2

3

Item 1
Item 2

4

Item 1
Item 2

5

Item 1
Item 2

6

Item 1
Item 2

7

Item 1
Item 2

8

Item 1
Item 2

gaps.tsx

import { Grid } from "@locus-ui/components";
const gaps = ["0", "1", "2", "3", "4", "5", "6", "7", "8"];
return gaps.map((gap) => (  <Box key={gap} px="2" py="1">    <Text>{gap}</Text>    <Grid columns="2" gap={gap}>      <Box px="2" py="1" className="border">Item 1</Box>      <Box px="2" py="1" className="border">Item 2</Box>    </Grid>  </Box>

Columns

The columns prop sets the number of grid columns: 1 through 12.

1

Item 1

2

Item 1
Item 2

3

Item 1
Item 2
Item 3

4

Item 1
Item 2
Item 3
Item 4

5

Item 1
Item 2
Item 3
Item 4
Item 5

6

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

columns.tsx

import { Grid } from "@locus-ui/components";
const columns = ["1", "2", "3", "4", "5", "6"];
return columns.map((col) => (  <Box key={col} px="2" py="1">    <Text>{col}</Text>    <Grid columns={col} gap="2">      {Array.from({ length: Number(col) }).map((_, i) => (        <Box key={i} px="2" py="1" className="border">Item {i + 1}</Box>      ))}    </Grid>

Rows

The rows prop sets the number of grid rows: 1 through 6.

1

Item 1

2

Item 1
Item 2

3

Item 1
Item 2
Item 3

4

Item 1
Item 2
Item 3
Item 4

5

Item 1
Item 2
Item 3
Item 4
Item 5

6

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

rows.tsx

import { Grid } from "@locus-ui/components";
const rows = ["1", "2", "3", "4", "5", "6"];
return rows.map((row) => (  <Box key={row} px="2" py="1">    <Text>{row}</Text>    <Grid rows={row} flow="column" gap="2">      {Array.from({ length: Number(row) }).map((_, i) => (        <Box key={i} px="2" py="1" className="border">Item {i + 1}</Box>      ))}    </Grid>

Flow

The flow prop controls the auto-placement direction: row, column, dense, row-dense, or column-dense.

row

Item 1
Item 2
Item 3
Item 4
Item 5

column

Item 1
Item 2
Item 3
Item 4
Item 5

dense

Item 1
Item 2
Item 3
Item 4
Item 5

row-dense

Item 1
Item 2
Item 3
Item 4
Item 5

column-dense

Item 1
Item 2
Item 3
Item 4
Item 5

flow.tsx

import { Grid } from "@locus-ui/components";
const flows = ["row", "column", "dense", "row-dense", "column-dense"];
return flows.map((flow) => (  <Box key={flow} px="2" py="1">    <Text>{flow}</Text>    <Grid columns="3" rows="2" flow={flow} gap="2">      <Box px="2" py="1" className="border col-span-2">Item 1</Box>      <Box px="2" py="1" className="border col-span-2">Item 2</Box>      <Box px="2" py="1" className="border">Item 3</Box>      <Box px="2" py="1" className="border">Item 4</Box>

Justify

The justify prop controls the inline-axis alignment: start, end, center, between, around, or evenly.

start

Item 1
Item 2

end

Item 1
Item 2

center

Item 1
Item 2

between

Item 1
Item 2

around

Item 1
Item 2

evenly

Item 1
Item 2

justify.tsx

import { Grid } from "@locus-ui/components";
const justifies = ["start", "end", "center", "between", "around", "evenly"];
return justifies.map((justify) => (  <Box key={justify} px="2" py="1" className="w-full">    <Text>{justify}</Text>    <Grid justify={justify} gap="2" style={{ gridTemplateColumns: "auto auto" }}>      <Box px="2" py="1" className="border">Item 1</Box>      <Box px="2" py="1" className="border">Item 2</Box>    </Grid>  </Box>

Align

The align prop controls the block-axis alignment: start, end, center, stretch, or baseline.

start

Item 1
Item 2

end

Item 1
Item 2

center

Item 1
Item 2

stretch

Item 1
Item 2

baseline

Item 1
Item 2

align.tsx

import { Grid } from "@locus-ui/components";
const aligns = ["start", "end", "center", "stretch", "baseline"];
return aligns.map((align) => (  <Box key={align} px="2" py="1">    <Text>{align}</Text>    <Grid columns="2" align={align} gap="2" style={{ height: "100px" }}>      <Box px="2" py="1" className="border">Item 1</Box>      <Box px="2" py="1" className="border">Item 2</Box>    </Grid>  </Box>