CSS Grid Cheatsheet - Grid Layout Reference

All essential CSS Grid commands organized by use case, with 42+ entries you can copy and run directly. Find the right command fast when you need it.

Web Services·42 commands·Last updated 2026-07-21

Back to Web Services

Container Definition 8

display: grid

Enable grid layout (block-level)

display: inline-grid

Enable grid layout (inline-level)

grid-template-columns: 1fr 2fr 1fr

Define column tracks & ratio

grid-template-rows: 100px auto 100px

Define row tracks & sizes

grid-template-columns: repeat(3, 1fr)

Repeat 3 equal columns

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))

Auto-fill responsive columns

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

Auto-fit responsive columns

grid-template-areas: "header header" "sidebar main" "footer footer"

Visual named-area layout

Gap & Alignment 10

gap: 16px

Row & column gap

row-gap: 16px

Row gap only

column-gap: 16px

Column gap only

justify-items: stretch

Stretch horizontally in cell (default)

justify-items: center

Center horizontally in cell

align-items: center

Center vertically in cell

place-items: center

Set both horizontal & vertical

justify-content: center

Align grid horizontally

align-content: center

Align grid vertically

place-content: center

Set both grid alignments

Cells & Spans 7

grid-area: header

Place item into named area

grid-area: 1 / 1 / 3 / 3

Line-based: row-start/col-start/row-end/col-end

grid-column: 1 / 3

Span columns: line 1 to 3

grid-row: 1 / span 2

Span 2 rows from line 1

grid-column: 1 / -1

Span full row (line 1 to end)

grid-column: span 2

Span 2 columns

grid-row: span 3

Span 3 rows

Explicit & Implicit Tracks 6

grid-auto-columns: 100px

Implicit column track size

grid-auto-rows: 100px

Implicit row track size

grid-auto-flow: row

Auto-placement: by row (default)

grid-auto-flow: column

Auto-placement: by column

grid-auto-flow: dense

Dense packing, fill gaps

grid-auto-flow: row dense

Row-wise dense packing

Common Patterns 6

grid-template-columns: 1fr 1fr 1fr

Three equal columns

grid-template-columns: 200px 1fr

Sidebar + main content

grid-template-columns: repeat(12, 1fr)

12-column grid system

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)

Prevent overflow break

grid-template-areas: "header" "main" "footer"

Single-column stacked layout

grid-column: 1 / -1

Item spans full row

Responsive Tips 5

repeat(auto-fit, minmax(200px, 1fr))

Auto-fit, empty tracks collapse

repeat(auto-fill, minmax(150px, 1fr))

Auto-fill, keeps empty tracks

repeat(auto-fit, minmax(min(100%, 250px), 1fr))

min() prevents small-screen overflow

@media (max-width: 768px) { grid-template-columns: 1fr }

Single column on mobile

grid-auto-rows: minmax(150px, auto)

Responsive row height

Tips

fr 是弹性单位，1fr 2fr 表示第二列是第一列的两倍宽。
minmax(200px, 1fr) 表示最小 200px，最大弹性填充，配合 auto-fill 实现响应式。
grid-template-areas 用可视化方式定义布局，代码可读性更好。
gap 替代了旧的 grid-gap，是最新的标准写法。
auto-fit 会折叠空轨道拉伸填满，auto-fill 保留空轨道，响应式布局常用 auto-fit。

Official References

Commands are compiled from the official docs below. Click to verify the latest usage.

MDN Web Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.