Grid System
栅格系统
Aliases:栅格栅格系统网格12 列分几栏布局网格grid system12-column grid
What is it
A reusable skeleton of columns, gutters and margins. Twelve columns is the default because 2, 3, 4 and 6 all divide into it, so any block can snap to the lines. A fixed grid is stable but brittle; repeat(auto-fit, minmax(240px, 1fr)) adds and drops tracks as space allows, and container queries reflow a component by its own width, not the viewport.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Several page blocks must align to one shared set of column lines
- A card wall should add or drop columns as width allows
- One component must adapt in a sidebar and a main column, not just by viewport
✕ When not to use
- A single-block page where a grid only adds nesting
- Forcing a grid onto free-form art that never needed alignment
- Nesting grids more than three deep until gutters compound out of control
Variants
Fixed 12-column
固定 12 栏
repeat(12, minmax(0, 1fr)) with blocks spanning tracks — stable but breakpoints are fixed
Auto-fit
自动适应
repeat(auto-fit, minmax(240px, 1fr)) — the browser picks the count from content width
Container query
容器查询
container-type: inline-size reflows by the component's own width, not the viewport
Implementation
grid-template-columns: repeat(12, minmax(0, 1fr))gap: var(--grid-gutter)repeat(auto-fit, minmax(240px, 1fr))container-type: inline-size@container (min-width: 40rem)Cap an outer container with a max width and side margins (--grid-margin); space columns with gap, never margins, so the last column has no extra offset. A fixed grid is repeat(12, minmax(0, 1fr)) — the 0 stops content from blowing out a track. Self-managing lists use repeat(auto-fit, minmax(240px, 1fr)) and let the browser pick the count. For component-level responsiveness use container-type: inline-size with @container instead of always bending to viewport breakpoints.
Platform API
grid-template-columnsrepeat()minmax()gap@containerIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | grid-template-columns |
| CSS | @container |
| Tailwind CSS | grid-cols-12 / @container |
Related concepts
An admin home screen that concentrates key data and entry points into one view, organized as regional grids: header and sidebar handle navigation, while KPI cards, charts and a primary table fill the content area so users grasp system status at a glance and drill down directly. It anchors the information architecture of the product.
PagesUsed withA marketing page organized vertically around one conversion goal: nav and hero explain "what is this and why it's good", mid-sections use features and social proof (logos, testimonials, numbers) to dissolve objections, and a strong call-to-action closes. Sections follow the persuasion order — each screen answers the visitor's next question.
PagesUsed withA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsUsed withA layout language that packs the interface like a bento box: rounded tiles of varying spans snap to one grid with narrow gutters — big cells carry the hero content, small cells hold stats and garnish. A card-grid upgrade where area itself encodes priority.
StylesUsed with