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 官方团队 ，专注多年设计研发

 效率协作工具

.burger {display：grid;width:275px;height:225px;}