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