Grid

FREE

Bootstrap-style Container, Row and Col with a 12-column responsive grid, gutters, offsets and ordering.

Playground

Change the props and watch the component and its code update live.

Props

Columns

Phone (xs)

Tablet (md)

Desktop (lg)

Gutter

Align

Justify

Code

import { Col, Row } from "@/components/ui/grid";

<Row>
  {items.map((item) => (
    <Col key={item.id} span={12} md={6} lg={4}>
      …
    </Col>
  ))}
</Row>

Installation

Terminal

npx @bloxa/cli add grid
# or: npx shadcn@latest add @bloxa/grid

Examples

Equal columns

Columns without a span share the space equally.

fill

Responsive

1 column on phones, 2 on tablets, 4 on desktops. Resize to try it.

Design

Build

Ship

Grow

Layout, offset and order

Content · md 8

Sidebar · md 4

md 6 · offset 3

API reference

Every component also accepts the props of the element it renders.

Container

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "fluid"	"xl"	Max width; fluid is full width.

Row

Prop	Type	Default	Description
gutter	0–8	4	Horizontal and vertical gap between columns.
gutterX / gutterY	0–8	—	Horizontal or vertical gap only.
align	"start" \| "center" \| "end" \| "stretch"	—	Vertical alignment.
justify	"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"	—	Horizontal distribution.

Col

Prop	Type	Default	Description
span	1–12 \| "auto" \| "fill"	"fill"	Width on all screens (out of 12).
sm / md / lg / xl	1–12 \| "auto" \| "fill"	—	Width from that breakpoint up (mobile-first).
offset / offsetSm / offsetMd / offsetLg / offsetXl	0–11	—	Columns to skip before this one.
order / orderMd / orderLg	number	—	Visual order.