今天，我們來(lái)探討一個(gè)有關(guān) CSS 網(wǎng)格的簡(jiǎn)短教程。沒(méi)有比食物更好的溝通方式了，所以我們一起來(lái)做一個(gè)漢堡練習(xí)吧~
什么是 CSS 網(wǎng)格？這是一個(gè)內(nèi)置的 CSS 框架，可讓您創(chuàng)建布局并且不需要局限于第三方框架（Bootstrap，F(xiàn)oundation等）的束縛。簡(jiǎn)短捷說(shuō)我們先從小制作漢堡示例開(kāi)始……
首先，我們?yōu)椤睗h堡“創(chuàng)建一個(gè)基本容器，并設(shè)置其樣式 display:grid?
.burger?{
display：grid;
width:275px;
height:225px;
}
現(xiàn)在我們?cè)O(shè)想一個(gè)網(wǎng)格里的x軸(列)和y軸(行)，y方向(行)可以決定這個(gè)表格中到底疊放多少層元素以及每層元素的高度。一個(gè)漢堡，底層是面包，中間層：牛肉、生菜、洋蔥、西紅柿，頂層是面包，那么我們就需要6行。
使用 grid-template-rows 屬性，可以為每一行命名并分配行高比例。例如，我們希望漢堡的頂部面包高度是底部面包高度的2倍，我們就可以設(shè)置頂層高度為 6fr 底層高度為 3fr。
grid-template-rows：[R1] 6fr [R2] 1fr [R3] 1fr [R4] 1fr[ R5] 3fr [R6] 3fr;
需要注意的是，”漢堡“容器中的每一層元素必須是div，不然將無(wú)法看到網(wǎng)格效果。我們也需要給每一層元素定義他y方向(行)所占據(jù)的空間，例如，”漢堡“頂層的面包，我們需要定義它占據(jù)從第[R1]行到[R2]行（但是鑒于在本例中，漢堡容器內(nèi)行的數(shù)量，與我們?cè)诙x容器 grid-template-rows 的行數(shù)量相同，所以gird-row屬性也可以省略）。同時(shí)也給這些層的div設(shè)置背景色，以方便我們查看。
.ingredient_bun--top {background-color：var（color）;? grid-row：R1 / R2;}
現(xiàn)在，我們創(chuàng)建x方向（列），這將決定"漢堡"中的元素橫向上應(yīng)該如何擺放。現(xiàn)在我希望漢堡夾層中的番茄和肉餅在橫向上稍微出來(lái)一點(diǎn)點(diǎn)。
grid-template-columns：[C1]1fr[C2]2fr[C3]5fr[C4]2fr[C5]5fr[C6]2fr[C7]1fr;
接下來(lái)，我們使用 gird-column 來(lái)定義每一層元素在x方向(橫向）上所占據(jù)的空間。
使用 grid-area 屬性來(lái)重寫(xiě) gird-row 和 gird-column，將兩個(gè)屬性進(jìn)行合并。合并后的 ?grid-area 屬性的格式為：row-start / column-start / row-end / column-end。
.ingredient_bun--top {
background-color：var（color）;??
?grid-row：R1/C2/R2/C7；
}
現(xiàn)在，我們得到了”漢堡“中所有元素的大致位置，接下來(lái)繼續(xù)完善這些元素的細(xì)節(jié)，比如顏色，面包的圓角等。而且可以在牛排上放置一個(gè)倒三角，以實(shí)現(xiàn)完整的芝士效果。
我們可以用如下顏色來(lái)完善漢堡中的元素...
最終我們得到了如下的漢堡~
你可以隨意調(diào)整漢堡的尺寸，并且網(wǎng)格容器內(nèi)所有的元素都會(huì)按照我們之前定義比例自動(dòng)進(jìn)行縮放?？梢酝ㄟ^(guò)如下鏈接查看最終實(shí)現(xiàn)的所有代碼：演示CSS Grid Burger
原文作者：Dora Chan
原文鏈接：https://blog.prototypr.io/css-grid-burger-b2df6991c194
喜歡我們的童鞋可以關(guān)注我們
● 微 信 公 眾 號(hào) ●
— 來(lái)自PxCook 官方團(tuán)隊(duì) ，專注多年設(shè)計(jì)研發(fā)
?效率協(xié)作工具
.burger?{display：grid;width:275px;height:225px;}
