Grid
A responsive, twelve-column layout system built on flexbox. Wrap your content in a
Container, group columns in a Row, and size each
Col with typed props. Every Bootstrap grid class becomes a prop, so the
breakpoints, spans, offsets, and gutters are checked at build time instead of stringed
into className.
Import
import { Container, Row, Col } from '@metatoy/bootstrap-styled';Equal-width columns
The simplest layout: drop bare Cols into a Row and they share the width evenly. Add
as many as you like — the row divides its twelve columns among them.
Setting column widths
Give Col a span of 1–12 to claim that many of the twelve columns. Use span="auto"
to size a column to its content, and a plain Col (or span omitted) to fill whatever
space is left.
Responsive columns
Each breakpoint is its own prop — sm, md, lg, xl, xxl — and span is the base
(xs, applies from 0 up). A breakpoint prop takes over at that width and larger, so
span={12} md={6} xl={4} reads as “full width on phones, halves at md, thirds at xl.”
Offsetting columns
offset (0–11) pushes a column to the right by that many of the twelve columns — handy for
centering or leaving a gap. Responsive variants (offsetSm…offsetXxl) shift the offset per
breakpoint.
Reordering columns
order controls the visual order independent of the DOM order: 'first', 'last', or a
number 0–5 (plus orderSm…orderXxl). Source order stays meaningful for assistive tech
while the layout reflows.
Row columns
Instead of sizing every Col, set cols on the Row to say how many equal columns wrap
per line — cols={2} colsMd={3} means two across on phones, three from md up. Great for
card and tile grids.
Gutters
Gutters are the padding between columns. g sets both axes on the Row (spacing scale
0–5), while gx and gy set the horizontal and vertical gutter independently. Each has
responsive variants (gMd, gxLg, …).
Nesting
Put a Row inside a Col to start a fresh twelve-column track scoped to that column’s
width. Nested rows carry their own gutters and can nest as deep as the layout needs.
Containers
Container centers your content and caps its width. By default it steps its max-width
at each breakpoint (540, 720, 960, 1140, 1320px). Set fluid for full width at
every size, or breakpoint="md" for a container that stays 100% wide until md and is
capped above it.
Container props
| Prop | Type | Default | Description |
|---|---|---|---|
| fluid | boolean | — | `.container-fluid` — full width at every breakpoint. |
| breakpoint | "sm" | "md" | "lg" | "xl" | "xxl" | — | Responsive container: `.container-{sm|md|lg|xl|xxl}` — 100% wide until the chosen breakpoint, then max-width-constrained. Ignored when `fluid`. |
| as | React.ElementType | — | — |
Container also accepts all native <div> attributes and an as prop.
Row props
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | RowColsValue | — | `.row-cols-*` — number of equal-width columns per row (base). |
| colsSm | RowColsValue | — | Responsive `.row-cols-{bp}-*`. |
| colsMd | RowColsValue | — | — |
| colsLg | RowColsValue | — | — |
| colsXl | RowColsValue | — | — |
| colsXxl | RowColsValue | — | — |
| g | GutterScale$1 | — | `.g-*` — horizontal + vertical gutter (base). |
| gSm | GutterScale$1 | — | — |
| gMd | GutterScale$1 | — | — |
| gLg | GutterScale$1 | — | — |
| gXl | GutterScale$1 | — | — |
| gXxl | GutterScale$1 | — | — |
| gx | GutterScale$1 | — | `.gx-*` — horizontal gutter only. |
| gxSm | GutterScale$1 | — | — |
| gxMd | GutterScale$1 | — | — |
| gxLg | GutterScale$1 | — | — |
| gxXl | GutterScale$1 | — | — |
| gxXxl | GutterScale$1 | — | — |
| gy | GutterScale$1 | — | `.gy-*` — vertical gutter only. |
| gySm | GutterScale$1 | — | — |
| gyMd | GutterScale$1 | — | — |
| gyLg | GutterScale$1 | — | — |
| gyXl | GutterScale$1 | — | — |
| gyXxl | GutterScale$1 | — | — |
| as | React.ElementType | — | — |
Col props
| Prop | Type | Default | Description |
|---|---|---|---|
| span | ColValue | — | Column span: 1–12, `'auto'`, or `true` for equal-width (base). |
| sm | ColValue | — | — |
| md | ColValue | — | — |
| lg | ColValue | — | — |
| xl | ColValue | — | — |
| xxl | ColValue | — | — |
| offset | OffsetSpan | — | `.offset-*` — push the column right by N/12 (base). |
| offsetSm | OffsetSpan | — | — |
| offsetMd | OffsetSpan | — | — |
| offsetLg | OffsetSpan | — | — |
| offsetXl | OffsetSpan | — | — |
| offsetXxl | OffsetSpan | — | — |
| order | OrderValue | — | `.order-*` — flex order; `'first'` (-1) / `'last'` (6) / 0–5 (base). |
| orderSm | OrderValue | — | — |
| orderMd | OrderValue | — | — |
| orderLg | OrderValue | — | — |
| orderXl | OrderValue | — | — |
| orderXxl | OrderValue | — | — |
| as | React.ElementType | — | — |
Theming
The grid is driven by CSS custom properties rather than fixed values. Row sets
--bs-gutter-x (default 1.5rem) and --bs-gutter-y (default 0); the g / gx / gy
props write those variables from the spacing scale, and each Col reads them for its side
padding and the row’s negative margins. Override --bs-gutter-x / --bs-gutter-y in a
scope to reshape spacing globally. Container max-widths follow the five breakpoints
(576, 768, 992, 1200, 1400px); see Breakpoints for
the full scale.
Accessibility
The grid is purely visual — Container, Row, and Col render plain <div>s with no
implied semantics. Keep the DOM order logical (that is what a screen reader and keyboard
follow) and reach for order only to adjust the visual arrangement, never to fix a
broken reading order. Use the as prop when a grid region should be a landmark such as
<main> or <section>.