CSS Grid 是 CSS 中最强大的二维布局系统。它允许你同时控制行和列，使复杂的页面布局变得简单直观。本完整 CSS Grid 速查表通过实际代码示例涵盖每个属性，帮助你掌握基于网格的布局。
网格容器属性
CSS Grid 从网格容器开始。在父元素上设置 display: grid，其直接子元素就成为网格项。你在容器上定义行和列的结构，项目被放置到生成的网格单元格中。
display: grid | inline-grid
定义网格容器。grid 创建块级网格容器；inline-grid 创建行内级网格容器，与周围文本一起流动。
.grid-container {
display: grid; /* block-level grid container */
}
.inline-grid-container {
display: inline-grid; /* inline-level grid container */
}grid-template-columns
定义网格中列的数量和大小。你可以使用固定长度、百分比、fr 单位或 repeat() 函数。
.container {
display: grid;
/* Fixed-width columns */
grid-template-columns: 200px 200px 200px;
/* Mixed units */
grid-template-columns: 200px 1fr 2fr;
/* Percentage-based */
grid-template-columns: 25% 50% 25%;
/* Using repeat() */
grid-template-columns: repeat(3, 1fr);
/* Named grid lines */
grid-template-columns: [start] 1fr [center] 2fr [end];
}grid-template-rows
定义行的数量和大小。与 grid-template-columns 完全相同，但用于垂直轴。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Fixed-height rows */
grid-template-rows: 80px 200px 80px;
/* Auto-sized rows */
grid-template-rows: auto 1fr auto;
/* Using minmax() for flexible rows */
grid-template-rows: minmax(100px, auto) 1fr minmax(60px, auto);
}fr 单位与 repeat()
fr（分数）单位表示网格容器中可用空间的一个分数。结合 repeat()，它提供了一种灵活简洁的方式来定义网格轨道。
分数单位 (fr)
fr 单位在固定大小的轨道分配完毕后，分配剩余空间。它是 CSS Grid 中创建灵活布局最重要的单位。
/* Equal columns */
.container {
grid-template-columns: 1fr 1fr 1fr;
/* Each column gets 1/3 of available space */
}
/* Proportional columns */
.container {
grid-template-columns: 1fr 2fr 1fr;
/* Middle column is twice as wide: 25% | 50% | 25% */
}
/* Mixed fixed and flexible */
.container {
grid-template-columns: 250px 1fr;
/* Fixed 250px sidebar, content fills the rest */
}
/* Multiple fixed + fr */
.container {
grid-template-columns: 80px 1fr 1fr 80px;
/* 80px | flexible | flexible | 80px */
}repeat() 函数
repeat() 函数避免重复的轨道定义。它接受重复次数和轨道列表。
/* Basic repeat */
grid-template-columns: repeat(3, 1fr);
/* Equivalent to: 1fr 1fr 1fr */
/* Repeat with fixed size */
grid-template-columns: repeat(4, 200px);
/* Equivalent to: 200px 200px 200px 200px */
/* Repeat a pattern */
grid-template-columns: repeat(3, 1fr 2fr);
/* Equivalent to: 1fr 2fr 1fr 2fr 1fr 2fr */
/* Mix repeat with other values */
grid-template-columns: 100px repeat(3, 1fr) 100px;
/* Equivalent to: 100px 1fr 1fr 1fr 100px */
/* Repeat with minmax() */
grid-template-columns: repeat(3, minmax(200px, 1fr));auto-fill 与 auto-fit 配合 minmax()
在 repeat() 中使用这些关键字可以创建无需媒体查询的响应式网格。它们自动确定容器中可以容纳多少个轨道。
/* auto-fill: create as many 200px+ columns as fit */
.container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* Fills row with columns, empty tracks remain */
}
/* auto-fit: same but collapse empty tracks */
.container {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* Items stretch to fill entire row */
}
/* Practical responsive card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}网格间距
gap 属性（曾用名 grid-gap）控制网格轨道之间的间距。与 margin 不同，间距仅出现在项目之间，不在网格的外边缘。
gap、row-gap、column-gap
你可以统一设置间距，也可以分别为行和列设置独立的间距。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Equal gap in both directions */
gap: 16px;
/* Different row and column gaps */
gap: 20px 12px; /* row-gap: 20px, column-gap: 12px */
/* Individual properties */
row-gap: 20px;
column-gap: 12px;
}
/* Legacy syntax (still works) */
.container {
grid-gap: 16px;
grid-row-gap: 20px;
grid-column-gap: 12px;
}
/* Common gap values for different contexts */
.tight-grid { gap: 8px; } /* compact UI */
.normal-grid { gap: 16px; } /* standard spacing */
.spacious-grid { gap: 24px; } /* card layouts */
.loose-grid { gap: 32px; } /* landing pages */网格模板区域
网格模板区域允许你为网格区域命名，并通过引用这些名称来放置项目。这在 CSS 中直接创建了一种可视化的、类似 ASCII 艺术的布局表示。
定义命名区域
在容器上使用 grid-template-areas，在项目上使用 grid-area 将它们分配到命名区域。
/* Define the grid structure visually */
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 60px;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh;
}
/* Assign items to named areas */
.page > header { grid-area: header; }
.page > aside { grid-area: sidebar; }
.page > main { grid-area: content; }
.page > footer { grid-area: footer; }
/* HTML structure:
<div class="page">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
<footer>Footer</footer>
</div>
*/空单元格与复杂布局
使用点号（.）表示空单元格。模板中的每一行必须有相同数量的列。
/* Using dots for empty cells */
.dashboard {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr 1fr auto;
grid-template-areas:
"nav header header"
"nav main aside"
"nav main ."
"nav footer footer";
gap: 16px;
min-height: 100vh;
}
/* Three-column layout with empty corners */
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
". header ."
"left center right"
". footer .";
}网格项放置
网格项可以使用行号、跨度或命名区域进行显式放置。网格线从起始边缘的 1 开始编号。
grid-column 与 grid-row
这些简写属性使用网格线编号定义项目在列轴和行轴上的起始和结束位置。
/*
Grid lines are numbered:
Column lines: 1 | 2 | 3 | 4
Row lines: 1 -- 2 -- 3 -- 4
3-column grid has 4 column lines
3-row grid has 4 row lines
*/
.item {
/* Start at column line 1, end at column line 3 */
grid-column-start: 1;
grid-column-end: 3;
/* Shorthand: start / end */
grid-column: 1 / 3; /* spans columns 1-2 */
grid-row: 1 / 2; /* occupies first row */
}
/* Using negative line numbers (count from the end) */
.full-width {
grid-column: 1 / -1; /* spans all columns */
}
.last-two-columns {
grid-column: -3 / -1; /* last two columns */
}跨越多个轨道
span 关键字让项目跨越多列或多行，无需指定确切的结束线。
/* Span 2 columns from auto-placement position */
.wide-item {
grid-column: span 2;
}
/* Span 3 rows */
.tall-item {
grid-row: span 3;
}
/* Span 2 columns starting from line 2 */
.specific-item {
grid-column: 2 / span 2; /* lines 2 to 4 */
}
/* Create a featured card spanning 2x2 */
.featured {
grid-column: span 2;
grid-row: span 2;
}grid-area 简写
grid-area 属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写，在一个声明中完成。
/* grid-area: row-start / col-start / row-end / col-end */
.item {
grid-area: 1 / 1 / 3 / 3;
/* Equivalent to:
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 3;
*/
}
/* Span the top-left 2x2 area */
.top-left {
grid-area: 1 / 1 / 3 / 3;
}
/* Full-width header */
.header {
grid-area: 1 / 1 / 2 / -1;
}
/* Named area assignment (with grid-template-areas) */
.sidebar {
grid-area: sidebar; /* matches name in grid-template-areas */
}对齐方式
CSS Grid 提供六个对齐属性，控制项目在网格单元格内的定位以及整个网格在容器内的定位。
justify-items 与 align-items
这些属性在单元格内对齐所有网格项。justify-items 沿行内（行）轴对齐；align-items 沿块（列）轴对齐。
.container {
display: grid;
grid-template-columns: repeat(3, 200px);
/* Align items horizontally within their cells */
justify-items: start; /* items hug the left edge */
justify-items: end; /* items hug the right edge */
justify-items: center; /* items centered horizontally */
justify-items: stretch; /* items fill cell width (default) */
/* Align items vertically within their cells */
align-items: start; /* items hug the top edge */
align-items: end; /* items hug the bottom edge */
align-items: center; /* items centered vertically */
align-items: stretch; /* items fill cell height (default) */
}justify-content 与 align-content
当网格小于容器时，这些属性在网格容器内对齐整个网格。justify-content 水平对齐；align-content 垂直对齐。
.container {
display: grid;
grid-template-columns: repeat(3, 200px);
/* Total grid width: 600px, container might be wider */
/* Horizontal alignment of the entire grid */
justify-content: start; /* grid at the left */
justify-content: end; /* grid at the right */
justify-content: center; /* grid centered */
justify-content: space-between; /* equal space between tracks */
justify-content: space-around; /* equal space around tracks */
justify-content: space-evenly; /* equal space everywhere */
/* Vertical alignment of the entire grid */
align-content: start;
align-content: end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
}place-items 与 place-content
这些是将 align 和 justify 合并为单个声明的简写属性。
/* place-items: <align-items> <justify-items> */
.container {
place-items: center; /* center in both axes */
place-items: start end; /* top-right corner */
place-items: center stretch; /* centered vertically, full width */
}
/* place-content: <align-content> <justify-content> */
.container {
place-content: center; /* center entire grid */
place-content: start center; /* top, centered horizontally */
}
/* Perfect centering of grid items */
.container {
display: grid;
place-items: center;
min-height: 100vh;
}justify-self 与 align-self
这些属性覆盖单个网格项的对齐方式，分别覆盖 justify-items 和 align-items。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: start; /* all items left-aligned */
}
/* Override for a specific item */
.special-item {
justify-self: center; /* this item centered in its cell */
align-self: end; /* this item at bottom of its cell */
}
/* Values: start | end | center | stretch */
.item-a { justify-self: start; } /* left */
.item-b { justify-self: center; } /* center */
.item-c { justify-self: end; } /* right */
.item-d { justify-self: stretch; } /* full width */自动流与隐式网格
当你没有显式放置每个项目时，CSS Grid 使用自动放置算法。grid-auto-flow 属性控制自动放置的项目如何填充网格。
grid-auto-flow
控制自动放置项目的方向和填充行为。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Fill row by row (default) */
grid-auto-flow: row;
/* [1] [2] [3]
[4] [5] [6] */
/* Fill column by column */
grid-auto-flow: column;
/* [1] [3] [5]
[2] [4] [6] */
/* Dense packing: fill gaps left by larger items */
grid-auto-flow: row dense;
/* Without dense: [wide] [ ] [3] (gap at position 2)
With dense: [wide] [3] [4] (gap filled) */
grid-auto-flow: column dense;
}隐式网格轨道
当项目放置在显式定义的网格之外时，会创建隐式轨道。使用 grid-auto-rows 和 grid-auto-columns 来设置这些隐式轨道的大小。
/* Only 2 rows defined, but we have 9 items */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
/* Implicit rows get this height */
grid-auto-rows: 150px;
/* Use minmax for flexible implicit rows */
grid-auto-rows: minmax(100px, auto);
}
/* Implicit columns (when using grid-auto-flow: column) */
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
grid-auto-columns: 200px;
grid-auto-columns: minmax(150px, 1fr);
}
/* Common pattern: unknown number of rows */
.feed {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: minmax(80px, auto);
gap: 16px;
}响应式网格模式
CSS Grid 擅长创建响应式布局。以下是最常见的响应式模式，其中许多不需要任何媒体查询。
auto-fill vs auto-fit
两者都可以创建响应式网格，但当项目数少于可用列数时有所不同。auto-fill 保留空轨道；auto-fit 折叠空轨道。
/* auto-fill: keeps empty tracks */
.grid-auto-fill {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* Container: 800px, items: 2
Result: [item1] [item2] [empty] [empty]
4 tracks of ~200px each */
/* auto-fit: collapses empty tracks */
.grid-auto-fit {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Container: 800px, items: 2
Result: [ item1 ] [ item2 ]
2 tracks of 400px each — items stretch */
/* Rule of thumb:
- auto-fit → items stretch to fill row (most common)
- auto-fill → consistent column widths */使用 minmax() 实现响应式
minmax() 函数设置网格轨道的最小和最大尺寸，实现流式响应行为。
/* minmax(min, max) */
grid-template-columns: minmax(200px, 1fr); /* 200px to 1fr */
grid-template-columns: minmax(0, 300px); /* 0 to 300px */
grid-template-rows: minmax(100px, auto); /* at least 100px */
/* Responsive grid: no media queries needed */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
/* 1 column on mobile, 2 on tablet, 3+ on desktop */
/* Preventing overflow on small screens */
.safe-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 16px;
}
/* min(100%, 300px) ensures items don't overflow on narrow screens */Grid 配合媒体查询
对于更复杂的响应式变化，将 CSS Grid 与传统媒体查询结合，在不同断点改变网格结构。
/* Mobile-first responsive grid */
.page-layout {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
gap: 16px;
}
/* Tablet: sidebar beside content */
@media (min-width: 768px) {
.page-layout {
grid-template-columns: 250px 1fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
}
/* Desktop: add right sidebar */
@media (min-width: 1200px) {
.page-layout {
grid-template-columns: 250px 1fr 200px;
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
}
}常见网格布局
以下是可以直接用于项目的生产级 CSS Grid 布局模式。
圣杯布局
经典的页面布局，包含页头、页脚、主内容和两个侧边栏 — 只需几行 Grid CSS 即可实现。
/* Holy Grail Layout with CSS Grid */
.holy-grail {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"left main right"
"footer footer footer";
min-height: 100vh;
gap: 16px;
}
.holy-grail > header { grid-area: header; }
.holy-grail > .left { grid-area: left; }
.holy-grail > main { grid-area: main; }
.holy-grail > .right { grid-area: right; }
.holy-grail > footer { grid-area: footer; }
/* Make it responsive */
@media (max-width: 768px) {
.holy-grail {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"left"
"right"
"footer";
}
}仪表盘布局
带有固定侧边栏、页头和由不同大小卡片填充的内容区域的仪表盘。
/* Dashboard Layout */
.dashboard {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 64px 1fr;
grid-template-areas:
"sidebar header"
"sidebar content";
min-height: 100vh;
}
.dashboard > .sidebar { grid-area: sidebar; }
.dashboard > .header { grid-area: header; }
.dashboard > .content { grid-area: content; }
/* Dashboard content area with cards */
.dashboard-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: minmax(200px, auto);
gap: 20px;
padding: 20px;
}
/* Featured card spans 2 columns */
.dashboard-cards .featured {
grid-column: span 2;
}
/* Tall card spans 2 rows */
.dashboard-cards .tall {
grid-row: span 2;
}响应式卡片网格
自动响应的卡片网格，无需媒体查询即可适应任何屏幕宽度。
/* Auto-responsive card grid — no media queries */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* Prevent overflow on very small screens */
.card-grid-safe {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 24px;
}
/* Card with internal grid layout */
.card {
display: grid;
grid-template-rows: 200px 1fr auto;
/* image area | content | footer */
}
.card .image { object-fit: cover; width: 100%; height: 100%; }
.card .body { padding: 16px; }
.card .footer { padding: 16px; border-top: 1px solid #eee; }瀑布流布局
虽然真正的瀑布流需要 JavaScript 或实验性的 masonry 值，但你可以使用 grid-auto-rows 和行跨越来近似实现。
/* Masonry-like layout using grid-auto-rows */
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 20px; /* small row height as base unit */
gap: 16px;
}
/* Items span different numbers of rows */
.masonry .item-small { grid-row: span 8; } /* 160px + gaps */
.masonry .item-medium { grid-row: span 12; } /* 240px + gaps */
.masonry .item-large { grid-row: span 16; } /* 320px + gaps */
.masonry .item-tall { grid-row: span 20; } /* 400px + gaps */
/* Alternative: CSS Columns for true masonry */
.masonry-columns {
column-count: 3;
column-gap: 16px;
}
.masonry-columns .item {
break-inside: avoid;
margin-bottom: 16px;
}侧边栏 + 内容
简单的两栏布局，包含固定宽度的侧边栏和灵活的内容区域。
/* Fixed sidebar + flexible content */
.sidebar-layout {
display: grid;
grid-template-columns: 280px 1fr;
min-height: 100vh;
}
/* Collapsible sidebar */
.sidebar-layout.collapsed {
grid-template-columns: 64px 1fr;
}
/* Responsive: stack on mobile */
@media (max-width: 768px) {
.sidebar-layout {
grid-template-columns: 1fr;
}
}
/* Sidebar on the right */
.sidebar-right {
display: grid;
grid-template-columns: 1fr 300px;
}
/* Both sidebars */
.three-column {
display: grid;
grid-template-columns: 200px 1fr 250px;
gap: 24px;
}Grid vs Flexbox
CSS Grid 和 Flexbox 是互补的布局系统。理解何时使用哪个对于高效的 CSS 架构至关重要。
CSS Grid 最适合：
- Two-dimensional layouts (rows and columns together)
- Layout-driven sizing (the layout dictates item sizes)
- Complex page layouts with header, sidebar, content, footer
- Dashboard-style layouts with varying card sizes
- Overlapping elements in a grid
- When you need precise control over both axes simultaneously
Flexbox 最适合：
- One-dimensional layouts (a single row or column)
- Content-driven sizing (items determine their own width)
- Navigation bars, toolbars, button groups
- Centering elements
- Dynamic, unknown number of items in a single line
- Components where items should wrap naturally
| 特性 | CSS Grid | Flexbox |
|---|---|---|
| 维度 | 二维（行 + 列） | 一维（行或列） |
| 布局方式 | 布局优先（定义结构，放置项目） | 内容优先（项目决定布局） |
| 轨道大小 | 显式定义行列轨道 | 项目自行调整大小 |
| 重叠 | 项目可以重叠（grid-area） | 无内置重叠 |
| 使用场景 | 页面布局、仪表盘、画廊 | 导航栏、工具栏、卡片行 |
在实践中，最佳方法是将两者结合使用：使用 Grid 进行整体页面布局，使用 Flexbox 在网格单元格内进行组件级对齐。
/* Best practice: combine Grid + Flexbox */
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Flexbox inside grid areas */
.page header {
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.page main {
grid-area: main;
}
/* Flexbox for card internals inside a grid layout */
.page main .card {
display: flex;
flex-direction: column;
}
.page main .card .body { flex: 1; }
.page main .card .actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}浏览器支持与回退方案
CSS Grid 在所有现代浏览器中都有出色的支持。以下是功能支持摘要。
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Basic Grid | 57+ | 52+ | 10.1+ | 16+ |
| gap (in Grid) | 66+ | 61+ | 12+ | 16+ |
| grid-template-areas | 57+ | 52+ | 10.1+ | 16+ |
| subgrid | 117+ | 71+ | 16+ | 117+ |
| masonry (experimental) | -- | flag | -- | -- |
CSS Grid 拥有超过 97% 的全球浏览器支持率。对于少数旧版浏览器，使用 @supports 提供回退方案：
/* Feature detection with @supports */
.container {
/* Fallback: Flexbox layout */
display: flex;
flex-wrap: wrap;
gap: 16px;
}
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
}
/* Progressive enhancement for subgrid */
.card {
display: grid;
grid-template-rows: auto 1fr auto;
}
@supports (grid-template-rows: subgrid) {
.card-grid .card {
grid-row: span 3;
grid-template-rows: subgrid;
}
}常见问题
CSS Grid 和 Flexbox 有什么区别？
CSS Grid 是二维布局系统，同时控制行和列，非常适合页面级布局。Flexbox 是一维的，一次只处理一行或一列，适合组件级布局。Grid 是布局优先（你定义结构并将项目放入其中），而 Flexbox 是内容优先（项目决定自身大小，布局自适应）。实际中，你应该同时使用两者 — Grid 用于页面结构，Flexbox 用于组件内部。
CSS Grid 中的 fr 是什么意思？
fr 单位代表"分数"，表示网格容器中可用自由空间的一个分数。例如，grid-template-columns: 1fr 2fr 1fr 创建三列，中间列获得两侧列两倍的空间。fr 单位仅分配固定大小轨道（px、rem 等）分配完毕后的剩余空间，非常适合创建灵活的响应式布局。
如何在不使用媒体查询的情况下创建响应式网格？
使用 repeat(auto-fit, minmax(min, 1fr)) 或 repeat(auto-fill, minmax(min, 1fr))。例如，grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 创建至少 250px 宽的列，当容器缩小时自动换行到新行。auto-fit 折叠空轨道使项目拉伸填满行，auto-fill 保留空轨道。
auto-fill 和 auto-fit 有什么区别？
auto-fill 和 auto-fit 都创建尽可能多的轨道以适应容器。区别在于当项目数少于可用列数时：auto-fill 保留空轨道，将其宽度维持为空白空间；auto-fit 将空轨道折叠为零宽度，允许现有项目拉伸填满整行。当你希望项目扩展时使用 auto-fit，当你希望列宽一致时使用 auto-fill。
可以用 CSS Grid 实现瀑布流布局吗？
原生 CSS 瀑布流是一个实验性功能（grid-template-rows: masonry），目前仅在 Firefox 中以标志位方式支持。在生产环境中，你可以使用 grid-auto-rows 配合小值，并让项目跨越不同数量的行来近似实现瀑布流，但真正的纵向填充间隙的瀑布流仍然需要 JavaScript 库（如 Masonry.js）或 CSS Columns 作为替代方案。CSS 瀑布流规范正在积极开发中，未来可能获得更广泛的浏览器支持。
CSS Grid 是现代 Web 开发的终极布局系统。结合 Flexbox 进行组件级对齐，你可以完全控制任何布局。使用我们的交互工具来巩固你的理解。