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>
