摘要：你可以用網(wǎng)格這樣做這樣的顯示效果是沒什么錯(cuò)誤的，當(dāng)使用網(wǎng)格，重新定義列數(shù)非常簡(jiǎn)單。絕對(duì)定位當(dāng)我們絕對(duì)定位一個(gè)網(wǎng)格元素的時(shí)候，這個(gè)元素會(huì)跑到它的容器中，我們可以用和來定位它。最簡(jiǎn)單的命名約定使用網(wǎng)格自動(dòng)編號(hào)。

注：此文是我翻譯的第一篇技術(shù)文章。適合有一定CSS原生網(wǎng)格布局使用經(jīng)驗(yàn)的開發(fā)者（讀前需要先去了解一下原生CSS網(wǎng)格的語(yǔ)法），原生CSS網(wǎng)格布局（Native CSS grid）截止目前還沒有被任何正式版本的瀏覽器實(shí)現(xiàn)。原文地址，譯者Blog

_以下是來自O(shè)liver Williams的帖子. Oliver已經(jīng)學(xué)習(xí)了相當(dāng)長(zhǎng)時(shí)間的原生CSS網(wǎng)格，可以說是在CSS網(wǎng)格方面有一定的發(fā)言權(quán)。在這篇文章中，他將以非同尋常的思路分析自己的CSS網(wǎng)格布局學(xué)習(xí)之路。我比較贊同他的想法，就是學(xué)習(xí)一門新技術(shù)的時(shí)候，把它們拆分成比較小的單元塊并配上實(shí)例，一步一步的學(xué)習(xí)。這比直接學(xué)習(xí)網(wǎng)格布局的所有東西要好太多了。

瀏覽器原生CSS網(wǎng)格預(yù)計(jì)會(huì)在2017年年初得到支持. 在這之前你需要在瀏覽器中開啟這個(gè)實(shí)驗(yàn)性的功能 (Firefox實(shí)驗(yàn)版默認(rèn)是開啟的). Chrome Canary是當(dāng)前最好的實(shí)現(xiàn). 同時(shí)，火狐有一個(gè)非常好的插件叫CSS Grid Inspector， 它能顯示出網(wǎng)格的線，它是目前唯一可以在瀏覽器中運(yùn)行的此類工具。

在 chrome的地址欄中輸入chrome://flags, 找到 ‘實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能’ 并開啟它. IE 和 Edge 實(shí)現(xiàn)的是一個(gè)比較老的網(wǎng)格標(biāo)準(zhǔn)，現(xiàn)在并不受支持。

相信我，很快你就能掌握它的.

網(wǎng)格布局只能像左邊那樣，以矩形的單元塊組合起來。并不能像右圖那樣，由一堆零散的多邊形（跟俄羅斯方塊那樣的塊）拼湊。

雖然網(wǎng)格布局和彈性盒在某些方面起到相似的作用，而且你可以發(fā)現(xiàn)，很多人用彈性盒來實(shí)現(xiàn)網(wǎng)格布局，但這并不是設(shè)計(jì)彈性盒的初衷。Jake Archibald的這篇博文值得一讀_Don"t use flexbox for overall page layout。

這篇博文大概的意思是:

Flexbox（彈性盒）是為一維布局設(shè)計(jì)的（行或列）。

CSS網(wǎng)格是為二維設(shè)計(jì)的.

Rachel Andrews也 說過類似的話:

Flexbox（彈性盒）用于一維布局 – 也就是行或者列. 網(wǎng)格用于二維布局 – 也就是多行多列.

它們可以很好的結(jié)合，你可以往彈性容器中放入網(wǎng)格，也可以在網(wǎng)格塊中加入flex元素

來看個(gè)例子吧。 我們想在一個(gè)網(wǎng)格元素（grid item）里垂直居中一段文字， 但我們想要讓背景（圖片，顏色或漸變）覆蓋整個(gè)的網(wǎng)格區(qū)域。 我們可以使用align-items屬性，并把它的值設(shè)為center，但是如果這樣背景并不會(huì)填滿整個(gè)網(wǎng)格元素的區(qū)域。align-items 默認(rèn)的值是 stretch-你不改變它，始終會(huì)填滿整個(gè)空間的。我們把網(wǎng)格元素設(shè)為align-items:center并把網(wǎng)格元素（grid item）設(shè)置為一個(gè)彈性容器（flex container）。

.grid {
  align-items: stretch;
}

.griditem {
  display: flex;
  align-items: center;
}

在小屏幕下，寫一個(gè)12列的網(wǎng)格，所有格子的跨度都12列。

你可以用網(wǎng)格這樣做：

/* For small screens */
.span4, .span6, .spanAll {
  grid-column-end: span 12;
}

/* For large screens */
@media (min-width: 650px) {
  .span4 {
    grid-column-end: span 4;
  }
  .span6 {
    grid-column-end: span 6;
  }
}

這樣的顯示效果是沒什么錯(cuò)誤的，當(dāng)使用CSS網(wǎng)格，重新定義列數(shù)非常簡(jiǎn)單。并且你可以通過設(shè)置grid-column-end: -1;來讓你的頁(yè)面始終是從左到右貫穿的。

/* For small screens */
.span4, .span6, .spanAll {
  grid-column-end: -1;
}

在大屏幕上，你想要盡可能的接近12列，但是在移動(dòng)端，一行大概是1～4列。用media來改變grid-template-columns是非常容易的。

.grid {
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 700px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

有一些元素，我們想讓它貫穿整個(gè)視口，比如像 header, footer，和一些大圖啥的。

對(duì)于小屏幕，我們可以這樣寫:

.wide {
  grid-column: 1 / 3; /* start at 1, end at 3 */
}

不幸的是，當(dāng)我們換到大屏的時(shí)候，一行12列，這些元素將僅僅占滿前兩列，并不會(huì)占滿12列，我們需要定義新的grid-column-end，并且把他的值設(shè)為 13. 這種方式比較麻煩，還有一種簡(jiǎn)單的方式，grid-column: 1 / -1;，這樣不論在什么屏幕尺寸下，它們都是占滿整行的了。就像下面這樣：

.wide, .hero, .header, .footer {
  grid-column: 1 / -1;
}

See the Pen Easier media queries with -1 by CSS GRID (@cssgrid) on CodePen.

使用grid-template-areas和grid-line-numbers是兩種控制行數(shù)的屬性，你也可以兩個(gè)同時(shí)用。你可以使用那些隱含的行名去設(shè)置你的網(wǎng)格。

.grid {
  grid-template-areas: "main main sidebar sidebar";
}

這段代碼，我們能得到四個(gè)隱含名字，main-start, main-end, sidebar-start, 和 sidebar-end.

這可能很有用，如果你想重疊內(nèi)容，無論是在幾個(gè)網(wǎng)格區(qū)域或在一個(gè)特定分段的網(wǎng)格區(qū)域。

See the Pen implicit line names with grid areas by CSS GRID (@cssgrid) on CodePen.

就像給網(wǎng)格的行命名，特殊的行名能用于設(shè)置網(wǎng)格區(qū)域，語(yǔ)法是這樣的：

.grid {
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
} 、

如果你的布局設(shè)計(jì)(太多列的布局！沒列都要起名字，可能還需要空元素)中有很多空的區(qū)域，這種寫法稍微有點(diǎn)麻煩。所以對(duì)于網(wǎng)格是有另一種寫法的，在這種寫法中，名字是什么無所謂，只要你合理利用到[name-start] 和 [name-end]，也能達(dá)到自己的布局目的。下面是一個(gè)例子：

.grid {
  display: grid;
  grid-template-columns: 20px 100px [main-start] 1fr [main-end] 100px 20px;
  grid-template-rows: 100px [main-start] 100px [main-end] 100px;
}

.griditem1 {
  background-color: red;
  grid-area: main;
}

See the Pen Another way of defining grid-areas by CSS GRID (@cssgrid) on CodePen.

你可能并不想整個(gè)頁(yè)面都用這種方式布局，但是如果你想要結(jié)合 grid-area來確定行數(shù)的話，它會(huì)非常適合。

雖然你可以在CSS網(wǎng)格中使用任意尺寸的行或列，但是如果想要相等大小的格子并是響應(yīng)式的，你就需要使用vmin單位了。

.grid {
  grid-template-columns: repeat(5, 20vw);
  grid-template-rows: repeat(5, 20vh);
}

這種布局在臺(tái)式電腦和筆記本上基本都可以完美顯示，但是在手機(jī)上，高度大于寬，內(nèi)容將會(huì)溢出，產(chǎn)生出一個(gè)橫向的滾動(dòng)條。Dudley Storey寫了篇blog說這件事the usefulness of a lesser-known css unit: vmin。這種方法，通過調(diào)整容器視口的百分比和內(nèi)容位置，做到適配各種尺寸的屏幕。

.gridcontainer {
  display: grid;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(5, 20vmin);
  grid-template-rows: repeat(5, 20vmin);
}

See the Pen Boxy Layout with CSS Grid and vmin by CSS GRID (@cssgrid) on CodePen.

當(dāng)我們絕對(duì)定位一個(gè)網(wǎng)格元素的時(shí)候，這個(gè)元素會(huì)跑到它的容器中，我們可以用grid-column 和 grid-row來定位它。正常情況下，絕對(duì)定位使元素脫離文檔流，它最適合的使用場(chǎng)景就是想要讓元素重疊，并不打亂其他布局元素。除非你為每個(gè)元素聲明grid-column-start 和 grid-row-start，要不然即使使用了絕對(duì)定位，元素也是不會(huì)重疊的。

嘗試刪除這個(gè)例子中div的position: absolute;，思考grid-column 和 grid-row的值，也可以試試修改它們，你就明白是什么意思了。

See the Pen preserving auto-placement with position: absolute by CSS GRID (@cssgrid) on CodePen.

如果你使用過彈性盒（flexbox）的order 屬性，那你已經(jīng)知道一些相關(guān)的知識(shí)了。所有的網(wǎng)格元素都有一個(gè)默認(rèn)的order值0。所以如果給一個(gè)網(wǎng)格元素設(shè)置 order: 1;，這個(gè)元素將在所有元素的后面。
你可以給order屬性設(shè)置負(fù)值，讓它跑到所有item的前面。

See the Pen Order value by CSS GRID (@cssgrid) on CodePen.

想不想要整行隨著內(nèi)容的寬度而變寬，直到他們達(dá)到最大寬度，這種情況你可能想嘗試使用 minmax() ：

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(1fr, 300px));
}

不幸的是，像上面這樣看似簡(jiǎn)單，實(shí)際上是不行的。如果max小于min的話，css會(huì)被忽略。在minmax()中fr不能使用。實(shí)際上實(shí)現(xiàn)這個(gè)需求很容易，在grid-template-columns 或 grid-template-rows中使用auto，這樣item就可以隨著內(nèi)容增大而變大了。
See the Pen The value of auto vs fr by CSS GRID (@cssgrid) on CodePen.

我們可以設(shè)置一個(gè) max-width:

.grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
}

.item {
  max-width: 300px;
}

See the Pen The limits of minmax by CSS GRID (@cssgrid) on CodePen.

minmax()的運(yùn)行方式和使用我還沒有完全想出來，雖然如此，我還是寫了一篇文章（譯者注：Medium entitled是什么我沒有理解清楚，原文：I wrote an entire post on Medium entitled） The One Thing I Hate About Grid.

有多種辦法供你選擇，如果你就想多寫點(diǎn)，你可以給多行設(shè)置多個(gè)名字。

.grid {
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
}

最簡(jiǎn)單的命名約定使用網(wǎng)格自動(dòng)編號(hào)。不是去寫 [col2]，而是寫為col 2

.griditem1 {
  grid-column-start: col 2;
}

和span關(guān)鍵字組合使用，我們就不用去寫column-start和column-end中的各種網(wǎng)格線數(shù)字了，這樣能直觀許多。

.grid {
  grid-template-columns: repeat(4, [col] 100px);
}

.griditem1 {
  grid-column: col 2 / span 2;
}

想象一下一行上四等列這種布局，使用百分比是多么的容易grid-template-columns: 25% 25% 25% 25%。

但是當(dāng)想用grid-gap屬性的時(shí)候那？如果設(shè)置grid-gap: 10px，那么這一行上將有三個(gè)空隙，每個(gè)10px，整體的寬度就是100% + 30px，大于100%滾動(dòng)條就出來了。雖然可以通過計(jì)算來解決，但是如果使用fr，這太容易了grid-template-columns: 1fr 1fr 1fr 1fr

See the Pen fr unit vs percentage by CSS GRID (@cssgrid) on CodePen.

沒有辦法強(qiáng)制自動(dòng)布局算法留下一些行和列是空的。

grid-gap可以讓我們?cè)O(shè)置內(nèi)容間的距離。grid-row-gap和grid-column-gap能設(shè)置行或列之間的間隙，可是如果我想讓第一行和第二行相距10px，第二行和第三行相距50px，用現(xiàn)有的網(wǎng)格是沒法實(shí)現(xiàn)的，除非建個(gè)空行占位。

你可能見到過像下面這樣寫grid-template-area的：:

grid-template-rows:
  "header header header"
  "main    main   main"
  "  .       .       ."
  "secondary secondary secondary"
  "footer footer footer";

應(yīng)該提供一個(gè)比較聰明的辦法，讓布局算法去做這件事。不幸的是，這樣寫也沒用。此語(yǔ)法簡(jiǎn)單地表示，我們不想將第三行變成一個(gè)命名的網(wǎng)格區(qū)域?？墒莋rid-template-rows將仍然在那結(jié)束。

12列網(wǎng)格算是web design的默認(rèn)配置了。Bootstrap引導(dǎo)大家用12列網(wǎng)格，導(dǎo)致很多框架都是12列網(wǎng)格。12既能被3整除也能被4整除，能讓我們有更多種布局?jǐn)[放方式。1行12列，1行6列，1行4列，1行3列，1行2列

雖然有些人喜歡每一個(gè)項(xiàng)目總是使用相同的網(wǎng)格，但是你應(yīng)該去思考你真正需要的，有時(shí)候沒有必要有更多的列，你應(yīng)該建立一個(gè)網(wǎng)格，對(duì)針對(duì)你的內(nèi)容去布局，而不是一個(gè)12列網(wǎng)格到處用。

看看這個(gè)例子 Gridset. Gridset是一個(gè)制作網(wǎng)格非常有用的工具, 但是原生CSS的網(wǎng)格不需要你使用任何工具，但是可以看看它展示的一些良好的網(wǎng)格設(shè)計(jì)。

看看我寫的例子，CSS原生網(wǎng)格是多么的自由啊:

See the Pen text layout with CSS Grid module by CSS GRID (@cssgrid) on CodePen.