CSS Tags
Search

Theme
Theme creator

Tune semantic inputs, preview them live, then export a trailing CSS layer.

Starting points
Color
Shape and spacing
Typography
Export theme

Load the generated file after css-tags.

Using documentation defaults.
GitHub

CSS Grid

A visual guide to two-dimensional layout with explicit and implicit tracks, placement, alignment, named areas, responsive grids, and subgrid.

The grid primitive is a declarative layer over CSS Grid. Use <grid>, [data-grid], or .grid; each host accepts the same attributes. Unlike Flexbox, Grid coordinates rows and columns together, making it the better choice when content must align in two dimensions.

<grid columns="1fr 2fr">...</grid>
<div data-grid columns="1fr 2fr">...</div>
<section class="grid" columns="1fr 2fr">...</section>

Grid vocabulary

A grid is made from tracks separated by gaps. The numbered boundaries around those tracks are grid lines. Items can be placed by line number, named line, span, or named area; items without placement instructions enter the auto-placement algorithm.

Columns, rows, cells, and gaps

This explicit grid has three columns, two rows, and six cells.
1
2
3
4
5
6

Defining explicit tracks

Fixed, intrinsic, and flexible columns

columns maps to grid-template-columns. Track lists can mix lengths, content-based sizes, and fr units.

Mixed column sizing

The outer tracks fit their jobs while the center track receives the remaining space.
min 10rem · 2fr

An fr unit receives a share of the free space left after fixed sizes, intrinsic contributions, and gaps have been accounted for.

Fractional track ratios
1fr
2fr
1fr

Explicit rows

rows maps to grid-template-rows. Items stretch by default, making row sizes easy to compare.

Rows with different sizes
3rem row
6rem row
Auto row follows its content.

Responsive tracks with repeat and minmax

The auto-fit and minmax() combination creates responsive columns without a page-level media query. The nested min(100%, …) keeps the minimum safe in very narrow containers.

Auto-fitting card grid

Resize the page: cards wrap when another 11rem track no longer fits.
Analytics

Weekly trends

Orders

24 awaiting review

Customers

8 new today

Inventory

3 low-stock items

auto-fill preserves empty track slots when space remains; auto-fit collapses those empty tracks so existing items can expand.

Named areas

areas describes the layout, and each direct child selects a region with area. Area names should describe page structure rather than visual position.

Named application shell

The markup names semantic regions; the template decides their two-dimensional placement.
Workspace

Main content

This region takes the flexible column.

Status: all systems operational
 
<div
  data-grid
  columns="10rem 1fr"
  areas="'header header' 'sidebar main' 'footer footer'"
>
  <header area="header">...</header>
  <nav area="sidebar">...</nav>
  <main area="main">...</main>
  <footer area="footer">...</footer>
</div>

Gaps

gap accepts one value for both axes or two values for row and column gaps.

Different row and column gaps
1
2
3
4
5
6

Gap decorations are a progressive enhancement. col-rule-* and row-rule-* attributes add rules in browsers implementing CSS gap decorations; other browsers retain the grid and its gaps.

Aligning items inside cells

Inline-axis alignment

justify-items sets the default inline-axis alignment inside every grid area.

justify-items values

start

AB

center

AB

end

AB

stretch

AB

Block-axis alignment

align-items sets the default block-axis alignment. The explicit rows provide enough room to make each value visible.

align-items values

start

AB

center

AB

end

AB

stretch

AB

Aligning the grid inside its container

justify-content and align-content move or distribute the complete track collection when it is smaller than the grid container. They do not align content inside individual cells.

Grid content alignment

Both grids use fixed tracks inside a larger stage.

center / center

1
2
3
4

space-between / end

1
2
3
4

Placing individual items

Grid lines and spans

col and row accept the normal grid placement shorthand: a single line, a start/end pair, or span.

Line placement and spanning

Items can occupy multiple tracks without changing source order.
columns 1–3
2 × 2 area
two rows
span 2

The longhand attributes col-start, col-end, row-start, and row-end are useful with named lines or when code constructs one boundary at a time.

Named grid lines
Content lines

Self alignment

justify-self and align-self override the container defaults for one item.

Per-item alignment overrides
start / start
end / start
start / end
center / center

Overlapping items

Grid permits multiple items in the same area. DOM order controls painting unless z-index says otherwise, so overlap should remain readable and intentional.

Layered grid content
Quarterly report

Layered over the same grid cell.

Automatic placement and implicit tracks

Items without explicit coordinates are placed according to auto-flow. Add dense to let later, smaller items fill earlier holes; visual order may then differ from source order.

Sparse and dense auto-placement

The dense grid backfills the opening left by spanning items.

row

span 2
span 2
1
1

row dense

span 2
span 2
1
1

auto-rows and auto-columns size tracks created outside the explicit template.

Implicit row sizing
Short
This item has enough content to make its implicit row grow beyond the minimum.
Short
A new implicit row

Subgrid

A direct child with subgrid adopts the parent tracks it spans. This lets nested content align with the outer grid instead of inventing slightly different columns.

Nested content aligned by subgrid

The nested section spans the parent grid and places its children on inherited tracks.

Starter

Team

Scale

1 project

20 projects

Unlimited

Practical compositions

Responsive dashboard

Auto-fit handles card wrapping while explicit placement lets the lead metric span available columns.
Revenue

$84,240

Up 12% this month

Orders

1,284

Refunds

18

Recent activity

Five deployments completed successfully.

Progressive masonry lanes

Supporting browsers use grid lanes; others retain the useful three-column grid fallback.
Short note
A taller card with more content.

Each item remains independently sized.
Medium card
with two lines.
Another compact note
A final card with enough content to demonstrate uneven block sizes across the collection.

API reference

Container attributes:

AttributeCSS equivalentDefault
displaydisplaygrid
columnsgrid-template-columnsnone
rowsgrid-template-rowsnone
areasgrid-template-areasnone
gapgap1.5rem
auto-flowgrid-auto-flowrow
auto-columnsgrid-auto-columnsauto
auto-rowsgrid-auto-rowsauto
justify-itemsjustify-itemsstretch
align-itemsalign-itemsstretch
justify-contentjustify-contentnormal
align-contentalign-contentnormal

Direct-child attributes:

AttributeCSS equivalentDefault
areagrid-areaauto
colgrid-columnauto
rowgrid-rowauto
col-start / col-endgrid column linesauto
row-start / row-endgrid row linesauto
justify-selfjustify-selfauto
align-selfalign-selfauto
subgridinherited parent tracksoff

Gap decoration attributes are col-rule-width, col-rule-style, col-rule-color, row-rule-width, row-rule-style, and row-rule-color. Experimental masonry-style layout uses lanes and flow-tolerance, with ordinary Grid as its fallback.

All values accept normal CSS syntax through typed attr(... type(*)) parsing. The component also exposes hierarchical variables including --grid-columns, --grid-rows, --grid-areas, --grid-gap, --grid-auto-flow, --grid-auto-columns, --grid-auto-rows, --grid-justify-content, and --grid-align-content.