CSS网格教程：妈妈我想吃 CSS 烤汉堡！

图1.最终结果

 

什么是 CSS 网格？这是一个内置的 CSS 框架，可让您创建布局并且不需要局限于第三方供应商（Bootstrap，Foundation等）的束缚。简短捷说我们先从小制作汉堡示例开始……

为简单起见，我请同学们用一条神奇的线-display：grid创建一个基本的汉堡容器。

 

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

图2.汉堡容器

 

现在考虑到网格，我们有一个x轴和y轴，或者说是列和行。让我们从行（y轴）开始。这决定了您希望彼此叠放多少元素，以及每种元素的厚度。一个底层面包，中间层：肉排、生菜、洋葱、西红柿，顶层面包。这将需要7行。

使用grid-template-rows，您可以为创建的每一行命名并分配（fr）作用比例。例如，相对于整个汉堡，我希望顶部面包的高度是底部面包的高度的两倍。分别是6fr和3fr等。

 

grid-template-rows：[R1] 6fr [R2] 1fr [R3] 1fr [R4] 1fr [R5] 3fr [R6] 3fr;

 

切记，除非为每种元素创建 div ，否则您将看不到网格的效果。定义每个 div 占用的空间是必要的。例如，顶部的面包将从[R1]到[R2]。其余的也要这样做。不要忘了添加颜色以提高可见度。

 

.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;

 

在定义成分的x轴跨度时，请使用网格列而不是网格行。

图4.定义列

 

您也可以重新编写CSS来合并grid-row和grid-column，以使其成为网格区域，而不是<row-start> / <column-start> / <row-end> / <column-end>。

 

.ingredient_bun--top { 
   background-color：var（color）; 
   grid-area：R1 / C2 / R2 / C7；
}

 

现在，我们完成了整体的单色板。对于每个部分，我们都希望多提高一些清晰度，比如说面包的圆角。提示：细节也要注意，在肉排上打一个倒三角，以达到完整的奶酪效果。

图5.详细信息

 

添加一些颜色...

成果……

您可以将汉堡的宽度和高度更改为所需的大小，并且网格组成将相应地缩放。汉堡制作环节可以进入代码演示界面查看哦~：https://codepen.io/doralchan/pen/XBwKgg

 

原文作者：Dora Chan

—— END ——

以上就是本次译文内容 

微信关注公众号：像素大厨PxCook

专为“产●设●研”而生！

可获取更多设计资讯，和各种作图小技巧