????????? Grid 網(wǎng)格布局詳解 ?????????

CSS網(wǎng)格布局模塊（CSS Grid Layout Module）提供了帶有行和列的基于網(wǎng)格的布局系統(tǒng)，它使網(wǎng)頁設(shè)計變得更加容易，而無需使用浮動和定位。當 HTML 元素的 display 屬性設(shè)置為 grid 或 inline-grid 時，它就會成為網(wǎng)格容器。下面會從Grid容器屬性、Grid項目屬性、Grid網(wǎng)格模版分開講解。

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

Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內(nèi)部多個項目的位置。但是，它們也存在重大區(qū)別。Flex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。Grid 布局遠比 Flex 布局強大。

Grid容器屬性

Grid項目屬性

Grid網(wǎng)格模板

<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>