Balance Logo
Balance
Reckon Design System

Columns

Use the columns primitive to layout content in configurable columns.
Install
pnpm add @reckon-web/columns
Import usage
import {
Column,
Columns
} from '@reckon-web/columns';
  • Code
  • API

Parent

Each child of Columns represents a single column. By default that column will span 1 fraction of the total number of children. For variable width columns please see the docs for Child.

Open in Playroom

Gap

The gap property defines how much space there should be between each element in the stack. Available gap sizes are:

  • none (default)
  • xsmall
  • small
  • medium
  • large
  • xlarge
  • xxlarge
<Columns gap="medium">
{/* items */}
</Columns>
gap: "medium"

Collapse

Provide a breakpoint where the columns should collapse and stack on top of one another.

  • small
  • medium
  • large
  • xlarge

Resize your browser window to see the columns collapse:

Child

Because the column layout uses CSS grid under-the-hood, you're not required to define a Column for each child. You may however find it useful for more dynamic layouts, where each column is not of equal width.

Span

Use the span property to explicitly define the number of columns on the parent, and the span property on a given Column child to define how many columns it will take up. You can create a more traditional grid-style column layout, à la Bootstrap:

primary
secondary

Or get creative with the responsive props:

sidebar
main
sidebar
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.