以下是Oliver Williams的客座帖子。 Oliver一直在使用CSS網(wǎng)格布局闻坚，并收獲良多。 在這篇文章中兢孝，他將討論他在這段旅程中領(lǐng)悟到的不同的概念窿凤。 我喜歡這樣的想法，通過短小的例子盡可能地學(xué)習(xí)關(guān)于網(wǎng)格布局中的形形色色的塊西潘。 這使得學(xué)習(xí)整個(gè)過程不會那么嚇人卷玉。
CSS網(wǎng)格大約到2017年早期會被設(shè)置在瀏覽器中。在那之前喷市，如果你想使用相种，你需要啟用網(wǎng)格工作（除了在Firefox Nightly默認(rèn)情況下啟用）。 Chrome Canary目前具有最佳表現(xiàn)品姓。 同時(shí)寝并，F(xiàn)irefox有一個(gè)非常寶貴的附加組件叫CSS網(wǎng)格檢查器，它可以顯示網(wǎng)格的線腹备。 它是目前唯一有這樣一個(gè)工具的瀏覽器衬潦。
在Chrome中，在地址欄中輸入“chrome://flags”植酥，找到“啟用實(shí)驗(yàn)性網(wǎng)絡(luò)平臺功能(#enable-experimental-web-platform-features)”镀岛，然后點(diǎn)擊啟用。 IE和Edge具有與當(dāng)前規(guī)范不同的舊的實(shí)現(xiàn)方法友驮，因此不推薦在此時(shí)間點(diǎn)對網(wǎng)格進(jìn)行實(shí)驗(yàn)漂羊。
你不能有俄羅斯方塊形的網(wǎng)格區(qū)域
你會很快地做自己工作。
您的網(wǎng)格區(qū)域只能是矩形（如左）卸留，而不是任意多邊形（如右邊）走越。
網(wǎng)格設(shè)計(jì)被用于flexbox，而不是去替代flexbox
網(wǎng)格布局 grid和彈性布局 flexbox都可以以類似的方式去實(shí)現(xiàn)功能耻瑟。 你可能已經(jīng)看到人們使用flexbox來構(gòu)建網(wǎng)格系統(tǒng)旨指，但這不是flexbox的設(shè)計(jì)目的赏酥。 這是值得閱讀Jake Archibald的博客文章Don't use flexbox for overall page layout。
一個(gè)快速的想法是：
Flexbox用于一維布局（行或列）谆构。
Grid是二維布局裸扶。
或者如Rachel Andrews 所說：
Flexbox本質(zhì)上是用于在單維度中布局項(xiàng)目 （ in a row OR a column）。 網(wǎng)格用于二維中的項(xiàng)目布局 （rows AND columns）低淡。
它們也可以組合姓言。 您可以將網(wǎng)格項(xiàng)轉(zhuǎn)換為flex容器。 您可以將flex項(xiàng)目轉(zhuǎn)換為網(wǎng)格蔗蹋。
讓我們舉一個(gè)有用的例子。 我們想要在一個(gè)網(wǎng)格項(xiàng)內(nèi)垂直居中文本囱淋，但我們想要背景（無論是顏色猪杭，漸變還是圖像）覆蓋項(xiàng)目的整個(gè)網(wǎng)格區(qū)域。 我們可以使用一個(gè)值為 center的align-items屬性妥衣，但此時(shí)背景是不會填充整個(gè)項(xiàng)目區(qū)域的皂吮。 align-items的默認(rèn)值是stretch ， 只要將它設(shè)置為任何其他值税手，它就不再填充該空間蜂筹。 讓我們將它設(shè)置為stretch并將我們的網(wǎng)格項(xiàng)轉(zhuǎn)換為flex容器。
.grid {
align-items: stretch;
}
.griditem {
display: flex;
align-items: center;
}
使用負(fù)行號非常有用
設(shè)想一個(gè)具有12列網(wǎng)格的現(xiàn)代CSS柵格框架芦倒。 在小屏幕上艺挪，而不是減少列數(shù)，內(nèi)容顯示的寬度為十二列總和兵扬，給人一個(gè)全寬列的印象麻裳。
你可以用網(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;
}
}
上面這種方法沒有問題。 然而使用CSS網(wǎng)格器钟，重新定義列數(shù)也是很容易的津坑。 通過使用-1，可以確保你的內(nèi)容始終可以實(shí)現(xiàn)想要的結(jié)果傲霸。
/* For small screens */
.span4, .span6, .spanAll {
grid-column-end: -1;
}
對于大屏幕疆瑰，您可能需要多達(dá)12列。 對于移動設(shè)備昙啄，任何地方之間都可以是1到4列穆役。 我們可以很容易地通過媒體查詢來更改grid-template-columns的值。
.grid {
grid-template-columns: 1fr 1fr;
}
@media (min-width: 700px) {
.grid {
grid-template-columns: repeat(12, 1fr);
}
}
有可能一些元素跟衅，我們想跨越整個(gè)視口的所有屏幕大小孵睬，如可能的頁眉header，頁腳footer或一些主圖伶跷。
對于小屏幕掰读，我們可以寫：
.wide {
grid-column: 1 / 3; /* start at 1, end at 3 */
}
但是秘狞，一旦我們進(jìn)行了媒體查詢，這些元素將只覆蓋十二列的前兩列蹈集。 我們可以在同一個(gè)媒體查詢中包括新的期望：grid-column-end:13烁试，但是有一個(gè)更容易的方法。 只要將結(jié)束值設(shè)置為 -1拢肆，它將涵蓋所有列减响，很多時(shí)候已經(jīng)這么做了。 例如：
.wide, .hero, .header, .footer {
grid-column: 1 / -1;
}
完整演示：
HTML：
<div class="gridcontainer">
<div class="griditem1">spans all columns</div>
</div>
CSS:
.gridcontainer {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}
.griditem1 {
grid-column-start: 1;
grid-column-end: -1;
/* will always span to the last line; no matter how many columns there are!*/
/* grid-column-end: 5; would work below 600px to make my div span all columns but not once I have added a column with a media query. I could adjust grid-column-end to 6 within the media query but it is far easier to use -1 */
background-color: green;
height: 200px;
justify-contents: center;
font-family: helvetica, arial;
text-align: center;
}
@media (min-width: 600px) {
.gridcontainer {
grid-template-columns: repeat(12, 1fr); /* I have added extra columns at larger screen sizes!! */
}
}
未完待續(xù)郭怪。支示。。
https://css-tricks.com/things-ive-learned-css-grid-layout/
https://css-tricks.com/snippets/css/complete-guide-grid/
