搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 像素大厨PxCook > CSS网格教程:妈妈我想吃 CSS 烤汉堡!

CSS网格教程:妈妈我想吃 CSS 烤汉堡!

像素大厨PxCook 2019-11-08

  

今天,我们来探讨一个有关 CSS 网格的简短教程。 CSS网格教程:妈妈我想吃 CSS 烤汉堡! CSS网格教程:妈妈我想吃 CSS 烤汉堡! CSS网格教程:妈妈我想吃 CSS 烤汉堡! CSS网格教程:妈妈我想吃 CSS 烤汉堡! CSS网格教程:妈妈我想吃 CSS 烤汉堡!

没有比食物更好的沟通方式了CSS网格教程:妈妈我想吃 CSS 烤汉堡!CSS网格教程:妈妈我想吃 CSS 烤汉堡!

所以我们一起来做一个汉堡练习吧~



     CSS网格教程:妈妈我想吃 CSS 烤汉堡!

图1.最终成果

 

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


首先,我们为”汉堡“创建一个基本容器,并设置其样式 display:grid 


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

     

 CSS网格教程:妈妈我想吃 CSS 烤汉堡!

图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;}

       CSS网格教程:妈妈我想吃 CSS 烤汉堡!

图3.定义行

 

现在,我们创建x方向(列),这将决定"汉堡"中的元素横向上应该如何摆放。现在我希望汉堡夹层中的番茄和肉饼在横向上稍微出来一点点。



grid-template-columns[C1] 1fr [C2] 2fr [C3] 5fr [C4] 2fr [C5] 5fr [C6] 2fr [C7] 1fr;

可滑动哦 → →


接下来,我们使用 gird-column 来定义每一层元素在x方向(横向)上所占据的空间。


      CSS网格教程:妈妈我想吃 CSS 烤汉堡!

图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;}



现在,我们得到了”汉堡“中所有元素的大致位置,接下来继续完善这些元素的细节,比如颜色,面包的圆角等。而且可以在牛排上放置一个倒三角,以实现完整的芝士效果。

 

       CSS网格教程:妈妈我想吃 CSS 烤汉堡!

图5.详细信息

 


我们可以用如下颜色来完善汉堡中的元素...

       CSS网格教程:妈妈我想吃 CSS 烤汉堡!



最终我们得到了如下的汉堡~


     CSS网格教程:妈妈我想吃 CSS 烤汉堡!

图6. CSS 网格汉堡

 

你可以随意调整汉堡的尺寸,并且网格容器内所有的元素都会按照我们之前定义比例自动进行缩放。可以通过如下图中二维码查看最终实现的所有代码:


CSS网格教程:妈妈我想吃 CSS 烤汉堡!


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

 

CSS网格教程:妈妈我想吃 CSS 烤汉堡!

END

 


以上就是本次译文内容 

● 微 信 公 众 号 ●

— 来自PxCook 官方团队 ,专注多年设计研发

 效率协作工具

点击下面 "阅读原文"  PxCook  更多内容~

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《CSS网格教程:妈妈我想吃 CSS 烤汉堡!》的版权归原作者「像素大厨PxCook」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

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

像素大厨PxCook微信公众号:PxCook

像素大厨PxCook

手机扫描上方二维码即可关注像素大厨PxCook微信公众号

像素大厨PxCook最新文章

精品公众号随机推荐