CSS網格教程：媽媽我想吃 CSS 烤漢堡！

今天，咱們來探討一個有關 CSS 網格的簡短教程。沒有比食物更好的溝通方式了，因此咱們一塊兒來作一個漢堡練習吧~

圖1.最終成果

什麼是 CSS 網格？這是一個內置的 CSS 框架，可以讓您建立佈局而且不須要侷限於第三方框架（Bootstrap，Foundation等）的束縛。簡短捷說咱們先從小製做漢堡示例開始……

首先，咱們爲」漢堡「建立一個基本容器，並設置其樣式 display:grid

.burger {
display：grid;
width:275px;
height:225px;
}複製代碼

圖2.漢堡容器

如今咱們設想一個網格里的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;
}複製代碼

圖3.定義行

如今，咱們建立x方向（列），這將決定"漢堡"中的元素橫向上應該如何擺放。如今我但願漢堡夾層中的番茄和肉餅在橫向上稍微出來一點點。

grid-template-columns：[C1] 1fr [C2] 2fr [C3] 5fr [C4] 2fr [C5] 5fr [C6] 2fr [C7] 1fr;複製代碼

接下來，咱們使用 gird-column 來定義每一層元素在x方向(橫向）上所佔據的空間。

圖4.定義列

使用 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；
}複製代碼

如今，咱們獲得了」漢堡「中全部元素的大體位置，接下來繼續完善這些元素的細節，好比顏色，麪包的圓角等。並且能夠在牛排上放置一個倒三角，以實現完整的芝士效果。

圖5.詳細信息

咱們能夠用以下顏色來完善漢堡中的元素...

最終咱們獲得了以下的漢堡~

圖6. CSS 網格漢堡

你能夠隨意調整漢堡的尺寸，而且網格容器內全部的元素都會按照咱們以前定義比例自動進行縮放。能夠經過以下連接查看最終實現的全部代碼：演示CSS Grid Burger

演示CSS Grid Burger

原文做者：Dora Chan

原文連接：https://blog.prototypr.io/css-grid-burger-b2df6991c194

喜歡咱們的童鞋能夠關注咱們

● 微 信 公 衆 號 ●

— 來自PxCook 官方團隊 ，專一多年設計研發

效率協做工具