基本示例
以下示例显示了一个三列轨道的网格，其中创建的行最小为 100 像素，最大为自动。条目使用线性定位放置在网格上。
* {
box-sizing: border-box;
}
.wrapper {
max-width: 940px;
margin: 0 auto;
}
.wrapper > div {
border: 2px solid rgb(233, 171, 88);
border-radius: 5px;
background-color: rgba(233, 171, 88, 0.5);
padding: 1em;
color: #d9480f;
}
HTML
html
CSS
css.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-row: 2 / 5;
grid-column: 1;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
参考
CSS 属性
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
grid-row-start
grid-column-start
grid-row-end
grid-column-end
grid-row
grid-column
grid-area
grid-row-gap
grid-column-gap
grid-gap
CSS 函数
repeat()
minmax()
fit-content()
CSS 数据类型
术语表
网格（Grid）
网格线（Grid lines）
网格轨道（Grid tracks）
网格单元格（Grid cell）
网格区域（Grid areas）
网格间隙（Gutters）
网格轴（Grid Axis）
网格行（Grid row）
网格列（Grid column）
指南
Basic concepts of Grid Layout
Relationship of Grid Layout to other layout methods
Layout using named grid lines
Grid template areas
Layout using named grid lines
Auto-placement in CSS Grid Layout
Box alignment in CSS Grid Layout
CSS Grid, Logical Values and Writing Modes
CSS Grid Layout and accessibility
Realising common layouts using CSS Grid
外部资源
Examples from Jen Simmons
Grid by Example - a collection of usage examples and video tutorials
Codrops Grid Reference
Firefox DevTools CSS Grid Inspector
CSS Grid Playground
Grid Garden - 一个学习 CSS 网格的游戏
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/css-grid-starter-layouts/
https://css-tricks.com/getting-started-css-grid/
规范
规范
CSS Grid Layout Module Level 2
帮助改进 MDN
此页面对您有帮助吗？
是
否
了解如何参与贡献
此页面最后更新于 2025年11月10日，由 MDN 贡献者更新。
在 GitHub 上查看此页面 • 报告此内容的问题