░░░░░░░░░ Grid 网格布局详解 ░░░░░░░░░

CSS网格布局模块（CSS Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。下面会从Grid容器属性、Grid项目属性、Grid网格模版分开讲解。

.grid-container {display: grid;}    /    .grid-container {display: inline-grid;}

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

Grid容器属性

Grid项目属性

Grid网格模板

<style type="text/css">
.grid-container {display: grid;grid-template:
	"a a a" 1fr
	"b c c" 1fr
	"b c c" 1fr
	"b d d" 1fr;
}
.grid-item {margin:10px;background:#ccc;padding:.8em;display:flex;align-items:center;justify-content:center;font-size:50px;}
</style>

<div class="grid-container">
	<div class="grid-item" style="grid-area: a;">A</div>
	<div class="grid-item" style="grid-area: b;">B</div>
	<div class="grid-item" style="grid-area: c;">C</div>
	<div class="grid-item" style="grid-area: d;">D</div>
</div>