Grid layout primitives to build responsive column-based layouts with configurable spans and gaps.

Columns

The Columns and Column components are layout primitives that make it simple to build responsive grid layouts. Define the number of columns and gaps, then optionally control each child’s span with Column. All layout props support responsive values via arrays.

Use Columns to establish the grid, and Column to control how wide each item should be (via colSpan). Responsive arrays let your layout adapt per breakpoint.

Features

Simple, semantic grid composition with Columns and Column
Responsive column counts and gaps via arrays
Per-item responsive spans via Column colSpan
Works well with Box/Stack/Inline for complete layouts

Usage

import { Columns, Column } from '@loke/design-system/columns';

export default function Example() {
  return (
    <Columns columns={3} gap={4}>
      <Column>Column 1</Column>
      <Column>Column 2</Column>
      <Column>Column 3</Column>
    </Columns>
  );
}

Tips:

Use responsive arrays: columns=1234, gap=2468, colSpan=12643
Prefer semantic, consistent spacing values to maintain rhythm
Nest Columns for advanced layouts; combine with Card/Box/Stack to separate layout from content

Props

Columns

Prop

Type

Column

Prop

Type

Examples

Basic

Column 1

Column 2

Column 3

<Columns columns={3} gap={4}>
  <Column>Column 1</Column>
  <Column>Column 2</Column>
  <Column>Column 3</Column>
</Columns>

Responsive columns

<Columns columns={[1, 2, 3, 4]} gap={[2, 4, 6, 8]}>
  <Column>1</Column>
  <Column>2</Column>
  <Column>3</Column>
  <Column>4</Column>
</Columns>

Responsive column spans

<Columns columns={12} gap={4}>
  <Column colSpan={[12, 6, 4, 3]}>A</Column>
  <Column colSpan={[12, 6, 4, 3]}>B</Column>
  <Column colSpan={[12, 12, 4, 3]}>C</Column>
  <Column colSpan={[12, 12, 12, 3]}>D</Column>
</Columns>

Different spans within a 12-column grid

<Columns columns={12} gap={4}>
  <Column colSpan={6}>6</Column>
  <Column colSpan={3}>3</Column>
  <Column colSpan={3}>3</Column>
  <Column colSpan={4}>4</Column>
  <Column colSpan={4}>4</Column>
  <Column colSpan={4}>4</Column>
</Columns>

Auto-fill columns

"auto-fill" fills the row with as many columns as will fit (based on your CSS setup and min widths).

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

<Columns columns="auto-fill" gap={4}>
  {Array.from({ length: 10 }).map((_, i) => (
    <Column key={i}>Item {i + 1}</Column>
  ))}
</Columns>

Nested columns

<Columns columns={3} gap={4}>
  <Column>
    <Columns columns={2} gap={2}>
      <Column>A1</Column>
      <Column>A2</Column>
    </Columns>
  </Column>
  <Column>B</Column>
  <Column>C</Column>
</Columns>

Many items

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

#22

#23

#24

<Columns columns={6} gap={2}>
  {Array.from({ length: 24 }).map((_, i) => (
    <Column key={i}>#{i + 1}</Column>
  ))}
</Columns>

Best practices

Start with a simple grid (columns and gap), then add spans as needed
Use responsive arrays to adapt layouts across breakpoints cleanly
Nest Columns sparingly to keep DOM shallow and layouts maintainable
Combine with Box/Stack/Inline to control local spacing and alignment inside cells

Columns

On this page