网格布局CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。
像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。
基本示例以下示例显示了一个三列轨道的网格，其中创建的行最小为 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;
}
HTMLhtml
CSScss.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/
规范SpecificationCSS Grid Layout Module Level 2