Balance Logo
Reckon Design System
Open playroom


pnpm add @balance-web/grid
Import usage
import {
} from '@balance-web/grid';
  • Code
  • API

The Grid layout primitive is a thin abstraction over the CSS grid layout.


  • Flex — For vertical layouts
  • Columns — For horizontal layouts, with prescriptive and exact child widths


Grid Template columns and rows

grid-template-columns and grid-template-rows allows to map to column and row layout respectively.

Edit in Playroom

6-column grid

grid-template-columns can be used to define N-column grid.

2-column layout with varying width

grid-template-columns allows to have a grid with varying column widths.

Layout using Template Area

grid-template-areas defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.

Grid column start / end & Grid row start / end

grid-column-start, grid-column-end, grid-row-start and grid-row-end determine a grid item’s location within the grid by referring to specific grid lines.

Note: These are 'grid item' (not a 'grid container') specific props.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo