CSS Grid 布局不好理解?可借助 CSS Grid Generator 快速上手并掌握 Grid 布局!
2020/3/26 14:01:21
本文主要是介绍CSS Grid 布局不好理解?可借助 CSS Grid Generator 快速上手并掌握 Grid 布局!,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
点赞再看,养成习惯本文
GitHub
https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。
为了保证的可读性,本文采用意译而非直译。
CSS Grid Generator
CSS Grid Generator是一个由Sarah Drasner创建的免费工具。它是一个可视化设计工具,允许咱们创建一个基本的 grid 布局,然后就可以使用生成对应的代码,帮助咱们快速布局。
第一次进入是界面是这样子的:
CSS Grid 布局示例
当我正在学习一些东西时,我发现最好的学习方法是使用现有的工具构建实用的东西。 在本文中,咱们先从一个简单的布局开始,然后使用CSS Grid Generator创建在实际项目中使用所需的代码。
首先从一个典型的布局开始,如下所示:
接着在 CSS Grid Generator 界面的右侧更新对应的以下内容:
- 行: 4
- 列: 3
- 列间距: 20
- 行间距: 20
间距让咱们的内容之间有一定的空白。可以只使用列间距,但我想在 Header 和 Footer 之前留出一些空白,所以还同时使用行间距。
接下来,就是需要定义应用程序的不同区域。在 CSS Grid Generator 中,可以单击并拖动到需要合并地方来创建一个区域。咱们希望Footer
跨越整个网格,侧边栏占用一个单元格,主内容区域跨越2
列,Footer
跨越4
列,最终效果,如下:
这看起来有点像咱们想要的布局,但仍然需要定义一些具体的尺寸。 在CSS Grid Generator 会注意到每行和每列旁边都有一个输入框,可用于设置特定大小。
- Header: 100px height
- Sidebars: 200px width
- Footer: 50px height
这看起来更像更像咱们想要的布局,但是你可能会问1fr
是多少。
轨道可以用任何长度单位来定义。Grid
还引入了一个额外的长度单位,以帮助各位创建灵活的Grid
轨道。新的fr
单元表示网格容器中可用空间的一小部分。
第二行的1fr
会告诉区域占用剩余的可用空间。如果将容器设置为100vh
,就会占据整个页面的内容,列也是如此。
CSS Grid Generated 生成的代码
点击“请给我示例中的代码”就可以查看对应布局生成的 CSS 代码:
.parent { display: grid; grid-template-columns: 200px 1fr 1fr 200px; grid-template-rows: 100px 1fr 50px; grid-column-gap: 20px; grid-row-gap: 20px; .div1 { grid-area: 1 / 1 / 2 / 5; } .div2 { grid-area: 2 / 1 / 3 / 2; } .div3 { grid-area: 2 / 2 / 3 / 4; } .div4 { grid-area: 2 / 4 / 3 / 5; } .div5 { grid-area: 3 / 1 / 4 / 5; } }
创建一个simple-layout.htm
并添加以下代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Simple Layout</title> <style> body { margin: 0; padding: 0; } </style> </head> <body> </body> </html>
接下来添加上面生成的 CSS:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Simple Layout</title> <style> body { margin: 0; padding: 0; } .parent { display: grid; grid-template-columns: 200px 1fr 1fr 200px; grid-template-rows: 100px 1fr 50px; grid-column-gap: 20px; grid-row-gap: 20px; height: 100vh; } .div1 { grid-area: 1 / 1 / 2 / 5; } .div2 { grid-area: 2 / 1 / 3 / 2; } .div3 { grid-area: 2 / 2 / 3 / 4; } .div4 { grid-area: 2 / 4 / 3 / 5; } .div5 { grid-area: 3 / 1 / 4 / 5; } </style> </head> <body> </body> </html>
接着添加对应的标签:
<body> <div class="parent"> <div class="div1"> Header </div> <div class="div2"> Left Sidebar </div> <div class="div3"> Main Content </div> <div class="div4"> Right Sidebar </div> <div class="div5"> Footer </div> </div> </body>
最后添加下面的CSS,它将为.div1 - .div
5添加一些背景色:
div:not(.parent) { padding: 10px; background-color: rgb(199, 199, 199); }
运行:
这看起来很好,但你希望它占据整个浏览器窗口。所以需要向.parent
类添加height: 100vh
:
.parent { display: grid; grid-template-columns: 200px 1fr 1fr 200px; grid-template-rows: 100px 1fr 50px; grid-column-gap: 20px; grid-row-gap: 20px; height: 100vh; }
最终效果:
大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】。
我和阿里云合作服务器,折扣价比较便宜:89/年,223/3年,比学生9.9每月还便宜,买了搭建个项目,熟悉技术栈比较香(老用户用家人账号买就好了,我用我妈的)推荐买三年的划算点,点击本条就可以查看。
网格轨道(Grid Track) 加餐
两个相邻的网络线之间为网络轨道。
图中的同方向 1 和 2, 2 和 3 都是相邻的网络线,当然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相邻的网络线。
相邻的网络线为网格轨道,如下,黑色1 和 2 之间就构成了网络轨道(背景深橘色):
上面总共有 5 个网络轨道,水平方向灰色 1 和 2, 2 和 3, 3 和 4,竖直方向黑色的 1 和 2, 2 和 3,共 5 个。
网格单元(Grid Cell) 加餐
两个相邻的列网络线和两个相邻的行网络线组成的就是网络单元,如下面的深橘色背景就是网络单元。
网络单元要与网络项(项目)区别开来,网络项是 Html 中可以找的到 Dom 元素,网络单元是在定义容器的时候,它就会分割出来的一个一个单元格。
网格区域(Grid Area) 加餐
四个网络线包围的总空间。
fr单位(加餐)
剩余空间分配数,用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
参考
https://dev.to/therealdanvega...
慕课grid教程
交流
干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。
https://github.com/qq44924588...
我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
关注公众号,后台回复福利,即可看到福利,你懂的。
这篇关于CSS Grid 布局不好理解?可借助 CSS Grid Generator 快速上手并掌握 Grid 布局!的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程