CSS網(wǎng)格布局是瀏覽器Flexbox布局之后最重要的布局方式。我們可以忘記過去15年經(jīng)常使用的的各種“神奇數(shù)字”，hacks和一系列變通布局方案。網(wǎng)格布局提供了非常簡(jiǎn)單的聲明布局方式，之后再也不需要借助一些常見的主流css框架，也能減少很多手動(dòng)實(shí)現(xiàn)的布局方式
如果你以前不熟悉CSS網(wǎng)格布局，那么你可以開始了解它了。它是一種適用于容器元素，并能指定子元素的間距、大小和對(duì)齊方式的布局工具。
CSS網(wǎng)格布局賦予我們更強(qiáng)大的能力——大家熟悉的水平垂直居中布局，不需要增加標(biāo)簽就能做到。同樣，這也能讓我們不需要媒體查詢就能根據(jù)可用空間自動(dòng)適應(yīng)。
瀏覽器兼容性
CSS網(wǎng)格布局從Safari 10.1, Firefox 52, Opera 44, Chrome 57開始收到支持，微軟Edge在Edge 15會(huì)更新對(duì)網(wǎng)格布局的支持。
微軟的瀏覽器（IE10–11和Edge 13-14）有一種比較舊的實(shí)現(xiàn)，所以有不少限制，我們會(huì)簡(jiǎn)單介紹新的實(shí)現(xiàn)方式和老的實(shí)現(xiàn)方式之間的區(qū)別，這樣你能知道如何規(guī)避他們。
創(chuàng)建帶有間距（gutter）的兩列（column）網(wǎng)格
為了創(chuàng)建上述網(wǎng)格布局，我們需要使用
grid-template-columns和grid-gap。grid-template-columns表示網(wǎng)格中的列是如何布局的，它的值是一連串以空格分割的的值，這些值標(biāo)識(shí)每列的大小，值的個(gè)數(shù)表示列的數(shù)目。
例如，四列250px寬度的網(wǎng)格布局可以這樣表示：
`grid-template-columns: 250px 250px 250px 250px;`
也可以使用repeat關(guān)鍵字表示：
grid-template-columns: repeat(4, 250px);
定義間距
grid-gap定義了網(wǎng)格布局的間距大小，接收一個(gè)或兩個(gè)值，如果定義兩個(gè)值則表示列（column）和行（row）的間距大小。
*在兩列布局示例中，我們可以如下使用： *
`.grid {
display: grid;
grid-template-columns: 50vw 50vw;
grid-gap: 1rem;
}`
不幸的是，這個(gè)間距將會(huì)占用容器元素的整體寬度，計(jì)算出來就是100vw + 1rem，最終這個(gè)布局會(huì)導(dǎo)致出現(xiàn)水平滾動(dòng)條。
內(nèi)容對(duì)齊
為了對(duì)齊示例中的內(nèi)容，我們?cè)谧釉厣鲜褂胓rid布局，并加上對(duì)齊屬性來定位他們到指定軌道(track)，軌道就是一個(gè)網(wǎng)格的列或行的某個(gè)位置的常見的名稱。網(wǎng)格跟Flex布局一樣，有一系列對(duì)齊的屬性——共有四種值——start, center, end, 和stretch，分別對(duì)應(yīng)其子元素所在的軌道。stretch跟其他不太一樣，它會(huì)將元素從所在軌道的頭拉伸到尾。
