Grid

CSS Grid is the foundation of layout in Axiom. Most layouts start with grid, not flexbox. Grid handles the macro structure, flexbox handles micro adjustments within grid cells. This is container-based: grids respond to available space, not viewport size.

Why Grid First

Grid excels at creating responsive layouts without breakpoints. A three-column grid becomes two columns, then one, automatically as the container shrinks. No media queries. No manual breakpoint management. The browser figures it out.

Flexbox wraps items but treats them as a single flexible row or column. Grid creates a true two-dimensional layout with explicit control over both axes. Use grid for page structure, card layouts, galleries, and any time you need items to align in rows and columns. Use flexbox for navigation bars, button groups, and linear arrangements within grid cells.

Grid Container

Create a grid container with .grid, then define columns. Gap handles spacing between items:

Basic grid
1
2
3
4
5
6

.grid .grid-cols-3 .gap-md

Column Count

Six explicit column counts, from one to six columns. Each uses equal-width columns with 1fr units:

.grid-cols-2
1
2
.grid-cols-3
1
2
3
.grid-cols-4
1
2
3
4
.grid-cols-6
1
2
3
4
5
6

Classes: .grid-cols-1, .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6

Fluid Grid

The most powerful grid utility. .grid-cols-fluid creates as many columns as will fit, with a minimum width of --size-xl (128px by default). Items automatically reflow as the container resizes. No breakpoints needed:

Item 1
Item 2
Item 3
Item 4
Item 5

.grid-cols-fluid uses repeat(auto-fit, minmax(var(--size-xl), 1fr))

Resize your browser to see items reflow automatically

Container-Responsive Columns

This is where Axiom's container-based approach shines. Start with a multi-column grid, reduce columns as the container narrows. The grid adapts to its container, not the viewport:

1
2
3
4

.grid-cols-4 .md:grid-cols-2 .sm:grid-cols-1

Four columns normally, two when container ≤900px, one when ≤600px

This same component works anywhere: full width, in a sidebar, in a modal. The layout adapts to available space, not screen size.

Column and Row Span

Make items span multiple columns or rows. Useful for featured items, headers, or asymmetric layouts:

Column spanning
.col-span-2
1
2
3
.col-span-3
Row spanning
.row-span-2
1
2
3
4

Column spans: .col-span-1 through .col-span-6

Row spans: .row-span-1 through .row-span-6

Grid Flow

Control whether items flow in rows (default) or columns:

.grid-flow-row (default)
1
2
3
4
5

Items fill rows first

.grid-flow-col
1
2
3
4
5

Items fill columns first

Grid Alignment

Control how grid items align within their cells and how the grid itself aligns within its container:

Place items (align items within cells)
Item
Item
Item

.place-items-center centers items both horizontally and vertically

Also: .place-items-start, .place-items-end, .place-items-stretch

Place content (align the grid within container)
1
2
3

.place-content-center centers the entire grid

Also: .place-content-start, .place-content-end, .place-content-between, .place-content-around, .place-content-evenly

Common Grid Patterns

Grid makes common layouts trivial:

Card grid with fluid columns

The most common pattern. Items wrap automatically:

Card 1
Card 2
Card 3
Card 4

.grid .grid-cols-fluid .gap-md

Holy grail layout (header, sidebar, main, footer)

Single column on narrow containers:

Header
Sidebar
Main
Aside
Footer

Container Queries All The Way Down

Every grid utility includes md: and sm: variants. Grids respond to their container at every level of nesting. A component maintains its responsive behavior whether it's full-width, in a sidebar, or nested three levels deep.

This is fundamentally different from viewport-based responsive design. You build components that adapt to available space, not screen size. Components become truly reusable.