CSS 布局模式，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。有以下几种形式：
块布局：用来布置文件。块布局包含以文档为中心的功能，例如 浮动元素或将其放置在多列上的功能。行内布局：用来布置文本。表格布局：用来布置表格。定位布局：用来对那些与其他元素无交互的定位元素进行布置 。弹性盒子布局：用来布置那些可以顺利调整大小的复杂页面。网格布局：用来布置那些与一个固定网格相关的元素。
注意: 并非所有 CSS 属性 适用于所有布局模式。大多数属性适用于一到两种布局模式，如果将属性设置在参与其他（原文another,指三者或三者以上。）布局模式的元素上则会不起作用。
CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。
像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用`CSS`网格可能还是比`CSS`表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像`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,.5);
padding: 1em;
color: #d9480f;
}
12345678910111213
HTML
<div class="wrapper">
<div class="one">One
</div>
<div class="two">Two
</div>
<div class="three">Three
</div>
<div class="four">Four
</div>
<div class="five">Five
</div>
<div class="six">Six
</div>
</div>
12345678
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;
}
12345678910111213141516171819202122232425262728293031
参考
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
123456789101112131415161718
CSS函数
repeat()
minmax()
fit-content()
123
CSS 数据类型
<flex>
1
术语表
网格（Grid）网格线（Grid lines）网格轨道（Grid tracks）网格单元格（Grid cell）网格区域（Grid areas）网格间隙（Gutters）网格轴（Grid Axis）网格行（Grid row）网格列（Grid column）
指南
Basic concepts of Grid LayoutRelationship of Grid Layout to other layout methodsLayout using named grid linesGrid template areasLayout using named grid linesAuto-placement in CSS Grid LayoutBox alignment in CSS Grid LayoutCSS Grid, Logical Values and Writing ModesCSS Grid Layout and accessibilityCSS Grid and progressive enhancementRealising common layouts using CSS Grid
外部资源
Examples from Jen SimmonsGrid by Example - a collection of usage examples and video tutorialsCodrops Grid ReferenceFirefox DevTools CSS Grid InspectorCSS Grid PlaygroundGrid Garden - 一个学习CSS 网格的游戏
