display函数怎么使用_使用网络构建复杂布局超实用的技巧,赶紧收藏吧
前端开发工程师必读书籍有哪些值得推荐?
我们直接进入代码,如下所示,先写些标签,源码在这个链接里面:https://codepen.io/Shadid/pen/zYqNvgv
Header Aside 1 Section Aside 2 Footer
在上面,我们创建了一个header、两个aside和一个footer元素,并将它们包装在一个container 元素中。我们为容器元素中的所有元素添加背景色和字体大小。
.container > * { background: aquamarine; font-size: 30px;}
运行的网页如下:
现在我们添加一些网格属性:
.container { display: grid; grid-gap: 5px; grid-template-areas: "header" "aside-1" "aside-2" "section" "footer"}/* Assign grid areas to elements */header { grid-area: header;}aside:nth-of-type(1) { grid-area: aside-1;}aside:nth-of-type(2) { grid-area: aside-2;}section { grid-area: section;}footer { grid-area: footer;}
首先,我们定义了display:grid,它将启用网格布局,然后我们使用grid-gap在网格元素中增加间隙。
接下来,我们为每个html元素分配了一个网格区域名称。在container 类中,我们可以使用grid-template-areas`属性定 义html 模板的外观,注意网格模板区域是如何排列的。
grid-template-areas: "header" "aside-1" "aside-2" "section" "footer"
元素的顺序与 dom 结构不同。但是,最终按我们网络区域的顺序来展示。
下一步是使我们的页面具有响应性。我们希望在更大的屏幕上使用不同的布局。CSS网格使得处理媒体查询和创建响应式布局变得非常容易。看下面代码:
@media (min-width: 670px) { .container { grid-template-areas: "header header header" "aside-1 section aside-2" "footer footer footer" }}
我们所要做的就是在媒体查询中重新排序网格模板区域。
网格列和行
如何使用 CSS 网格来组织列和?先从下面的代码开始:
One
Two
Three
Four
Five
Six
添加一些基本的 css
.container { display: grid; height: 100vh; grid-gap: 10px;}.item { background: lightcoral;}
我们为上面的 dom 结构使用了网格布局,并使用grid-gap增加了风格之间的间距。现在,我们使用grid-template-columns属性来添加一些列。
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-columns: 100px 200px auto auto;}
就像这样,我们使用了列。我们指定第一列为100px,第二列为200px。由于我们在第3列和第4列中应用了auto,因此剩余的屏幕长度将在其中分成两半。
可以看到现在页面中有一个空白。如果我想将第六列移至第三列和第四列怎么办?为此,我们可以使用grid-column-start和grid-column-end属性。
.item:nth-of-type(6) { grid-column-start: 3; grid-column-end: 5;}
注意,我们使用grid-column-end: 5,值5指向列线。第四列在网格的第五行结束。grid-column-start和grid-column-end值是指网格线。
如果你觉得网格线的值让人困惑,你也可以使用span,下面的效果与上面一样:
.item:nth-of-type(6) { grid-column-start: 3; grid-column-end: span 2;}
对于span 2,指定div占用网格中的两个插槽。现在,假设要扩展第二列填充下面的空白区域。我们也可以通过grid-column-start属性轻松地做到这一点。
.item:nth-of-type(2) { grid-row-start: span 2;}
我们使用span和grid-row-start来指定我们想要占据两个插槽。
如上所见,我们已经能够使用少量的CSS网格属性来构建非常复杂的布局。
有效地使用 grid-templates
现在来看看grid-templates,在本节中,我们将讨论如何为不同的屏幕大小创建不同的布局。
首先,还是先来一段 dom 结构:
header Left Section Right Footer
接着,添加一些样式:
`` .container { display: grid; height: 100vh; grid-gap: 10px; }
.container > * { background: coral; display: flex; justify-content: center; align-items: center; }` ``
我们给元素添加了背景色。从上面的代码中可以看到,我们也使用了flex属性。我们可以将flex和grid结合在一起。在这个特殊的例子中,我们使用flex属性中心对齐内容。
对于移动端,我们希望section在header下面,right 在 section下面,我们可以使用网格区域来完成。首先,我们定义网格区域:
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-areas: "header" "section" "right" "left" "footer"}aside:nth-of-type(1) { grid-area: left;}aside:nth-of-type(2) { grid-area: right;}section { grid-area: section;}footer { grid-area: footer;}header { grid-area: header;}
在 grid-template-areas 中可以看到,我们先有header ,然后是section,然后是right,最后是left。此外,我们希望我们的section比 left 和 right都大点。为了实现这一点,我们可以使用rid-template-rows属性
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-areas: "header" "section" "right" "left" "footer"; grid-template-rows: 1fr 6fr 2fr 2fr 1fr;}
少了一张图片
我们可以根据需要设置移动端的视图,接下我们使用媒体查询来适配一下大屏幕:
@media (min-width: 500px) { .container { grid-template-areas: "header header header" "left section right" "footer footer right"; grid-template-rows: 1fr 6fr 1fr; grid-template-columns: 1fr 6fr 1fr; }}
如何使用minmax函数动态跟踪元素的大小
假设我们有两列,它们均匀地占据了屏幕上的可用空间。通过使用 grid-template-columns,我们可以很容易地做到这一点。但是,如果我们想要其中一个在200px到500px之间呢?我们的列可以适应不同的屏幕尺寸,但其中一个永远不会大于500px或小于200px。
对于这些类型的场景,我们使用minmax函数。让我们来看看它的实际效果。
One
Two
.container { display: grid; height: 100vh; grid-template-columns: minmax(200px, 500px) minmax(100px, auto);}.one { background: cyan;}.two { background: pink;}
在这个例子中,第一列总是在200px到500px之间。然而,第二列的最小值可以是100px,对于更大的屏幕,它将覆盖屏幕的其余部分。
如何使用 repeat 函数?
我们讨论一下元素中的重复模式。我们如何处理它们?我们可以重复我们的代码或使用javascript。不过,还有另一种方法可以用css来实现。repeat函数表示轨道列表的一个重复片段,允许以更紧凑的形式编写显示重复模式的大量列或行。
This item is 50 pixels wide.
Item with flexible width.
This item is 50 pixels wide.
Item with flexible width.
Inflexible item of 100 pixels width.
#container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px;}#container > div { background-color: #8ca0ff; padding: 5px;}
嵌套网格
我还可以将网格嵌套在另一个网格中, 来看看如何实现这一点:
One
Two
Three
i
ii
iii
iv
v
vi
Five
Six
我们首先在外部container上声明网格:
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, auto))}
注意,我们在网格模板中有一个repeat函数,并将其与一个minmax函数组合在一起。我们现在也可以将网格属性应用到内部网格。
.inner-grid { display: grid; background: white; height: 100%; grid-gap: 5px; grid-template-columns: repeat(3, auto);}
这样,我们网格中嵌套了一个网格。
今天就跟大家分享到这里,感谢大家的观看,我们下期再见!
作者:Shadid Haque 译者:前端小智 来源:soshace
原文:https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/
display函数怎么使用_使用网络构建复杂布局超实用的技巧,赶紧收藏吧相关推荐
- display函数怎么使用_损失函数—深度学习常见损失函数总结【图像分类|上】
点击蓝字关注我们 AI研习图书馆,发现不一样的精彩世界 学习 笔记 常见损失函数总结-图像分类篇[上] 一.前言在深度学习中,损失函数扮演着至关重要的角色.通过最小化损失函数,使模型达到收敛状态,减少 ...
- 高等数学公式大全_高中物理知识思维导图大全,赶紧收藏!
物理作为理综的重中之重,物理的学习一直是广大考生的难点.如何快捷高效的掌握物理知识点是高考复习的重点之一,根据高中物理三年知识点用思维导图的方式,来助大家掌握物理知识点. 运动的描述 重力 基本 ...
- 双千兆和双频千兆哪个好_关于千兆路由器的那些事儿!赶紧收藏
无线Wi-Fi已成为现代人生活.工作的标配,随着百兆乃至千兆的光纤网络普及,传统路由器已跟不上时代的速度了.不少用户的眼光已投向速度更快的千兆路由器,那么大家真的了解什么是千兆路由器吗?千兆路由器有哪 ...
- 随机网络构建_构建随机报价机
随机网络构建 by Ayo Isaiah 通过Ayo Isaiah 构建随机报价机 (Building a Random Quote Machine) I really wasn't entirely ...
- R语言glm函数构建二分类logistic回归模型、epiDisplay包logistic.display函数获取模型汇总统计信息(自变量初始和调整后的优势比及置信区间,回归系数的Wald检验的p值
R语言glm函数构建二分类logistic回归模型(family参数为binomial).使用epiDisplay包logistic.display函数获取模型汇总统计信息(自变量初始和调整后的优势比 ...
- R语言构建无序多分类逻辑回归模型、mlogit.display函数获取无序多分类逻辑回归模型的汇总统计信息(各分组模型对应的系数及标准差、相对危险降低率RRR值及其置信区间、AIC值等)
R语言使用nnet包的multinom函数构建无序多分类logistic回归模型.使用epiDisplay包的mlogit.display函数获取无序多分类logistic回归模型的汇总统计信息(各分 ...
- 微生物相关网络构建教程:MENA, LSA, SparCC和CoNet
点击上方蓝色「宏基因组」关注我们!专业干货每日推送! 原文为自自Microbial association network construction tutorial http://psbweb05. ...
- 微生物相关网络构建教程中文Microbial association network construction tutorial
原文为自Microbial association network construction tutorial http://psbweb05.psb.ugent.be/conet/microbial ...
- 美国人口普查年收入比赛_训练网络对收入进行分类:成人普查收入数据集
美国人口普查年收入比赛 We have all heard that data science is the 'sexiest job of the 21st century'. Hence, it ...
最新文章
- 【BZOJ】3771: Triple FTT+生成函数
- 在手机计算机打数字能监控手机吗,注意了!如果屏幕上出现这4种现象,你的手机可能已被监视...
- mfc 使用画笔画线
- Win32 GetWindowLong函数实例Demo
- LeetCode题组:第543题-二叉树的直径
- intellij2018修改代码背景颜色
- Restive.js – 轻松让网站变成响应式和自适应
- 超全、超详的Spring Boot配置讲解笔记
- winform定义数据源名称_求C#winform 数据库类(连接和增删改查)和在窗口中的调用代码...
- hutool 读取扩展名文件_如何快速的搜索文件,Everything使用技巧
- 讲解HTML和CSS(超详细)
- HBuilderX踩坑记录(1)—— vivo iqoo z1开启adb调试
- 电脑的脉搏---时钟频率的来龙去脉
- 基于VUE + Echarts 实现可视化数据大屏智慧校园可视化
- 数字图像处理第三章-----空间域滤波
- 湘潭2017 ccpc中南地区邀请赛 Determinant 高斯约当求逆矩阵
- 网站业务被攻击,CPU100%负载满了怎么解决
- 喜 欢 和 爱 的 区 别(转)
- Python:1014 福尔摩斯的约会
- python培训学费多少钱-python培训学费多少钱
热门文章
- 精简指令和复杂指令计算机,CPU精简指令集和复杂指令集的区别
- html代码编辑器sp,在线HTML编译,文本关键字高亮显示,富文本编辑实现大概思路...
- python彩票数据分析案例_天津Python人工智能课程
- eclipse查看git地址_gitamp;github的入门实战
- arm 交叉编译找不到so_搭建交叉编译环境并验证
- E1 PCM复用设备能当程控交换机用吗?
- 光模块和光纤收发器的区别是什么?
- 【渝粤教育】广东开放大学 演讲与口才 形成性考核 (1)
- 【渝粤题库】国家开放大学2021春2302供应链管理题目
- autowired注入为 mapper为null_兰新高铁为区域经济发展注入活力