使用CSS Grid布局实现网格的流动


Posted in HTML / CSS onDecember 30, 2014

HTML文档中有文档流,其实在CSS Grid Layout中有网格流。简单点理解就是,在一个被显式声明为网格的容器中,其所有子元素自动被认定为网格单元格,而这些网格单元格在没有被显式设置明确位置时,浏览器将会自动为这些网格单元格的位置进行计算,按照先后顺序从左向右,或从上到下排列。在这里把这种方式称之为网格的流动。

在具体介绍网格流动相关内容之前,我们先一起来回忆一个简单的效果。平时在Web页面制作当中,经常会碰到产品列表展示页面,或者说相册展示页面的效果。如下图所示:

使用CSS Grid布局实现网格的流动

实现上图的效果,大家平时大多会采用floatdisplay:inline-block等方法实现。但这些方法或多或少存在一定的局限性。那么在CSS Grid Layout中,实现这样的布局相对而言会简单多。比如通过网格线,或者网格区域来明确指定各自的位置。不过这样一来,就存在一个潜在的问题:如果在不同的设备上浏览,每行展示的数量不一致时,需要在媒体查询中为每个网格重新指定位置,这变得更为复杂。也不是我们希望的效果。其实在网格布局中还有一种更方便的方法,就是采用网格流来实现。这也是我们今天要说的内容 。

网格的自动流

在CSS Grid Layout中,给元素显式的声明网格,如果没有显式的通过网格线或者网格区域明确指定网格的位置,那么浏览器将会对容器内子元素(网格单元格)进行自动布局。

来看一个简单的示例,假设容器.wrapper中有14个.box(A~O)。容器.wrapper显示的声明为网格,并且不对任何.box做显式的位置定位,这个时候浏览器会自动为.box进行自动布局。为了更好的看到效果,在这个示例中给偶数的.box设置了一个green背景色:

HTML

复制代码
代码如下:

<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">L</div>
<div class="box m">M</div>
<div class="box n">N</div>
<div class="box o">O</div>
</div>

CSS

复制代码
代码如下:

.box {
background: orange;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 3em;
}
.box:nth-child(even){
background: green;
}
.wrapper {
width: 500px;
border: 1px solid orange;
padding: 15px;
margin: 20px auto;</p> <p> display: grid;
grid-template-columns: repeat(5, 100px);
grid-template-rows: auto ;
}

效果如下:

使用CSS Grid布局实现网格的流动

在线案例

不过离文章所示效果还是略有差距,每个.box之间没有间距,我尝试着给.box设置margin值:

使用CSS Grid布局实现网格的流动

在线案例

从效果图中可以明显看出,盒模型解析已做出变化:

使用CSS Grid布局实现网格的流动

上图中可以得知,在CSS Grid Layout中盒模型大小计算变成:容器width = margin-left + margin-right + padding-left + padding-right + content width + border-left-width + border-right+width。比如我们这个示例中,.box设置width:100px,并且有一个margin-right:15px;那实际上.box的内容宽度仅只有85px。这样一来与文章开头示例相左,如果需要做到一致效果,还需对其做一定的变化。这个变化就是对容器.wrapper的宽度和grid-template-columns属性值:


复制代码
代码如下:
<font face="Courier New">
<font face="Courier New">.wrapper {
width: 560px;
border: 1px solid orange;
padding: 15px;
margin: 20px auto;
display: grid;
grid-template-columns: repeat(5, 115px);
grid-template-rows: auto ;
}</font>
</font>

效果如下:

使用CSS Grid布局实现网格的流动

在线案例

或许你会感觉这并没有强大到哪呀,跟以前使用float有太多的变化吗?如果你觉得没有,那请继续往下阅读。

网格流动——列

网格的自动流,在默认情况下都是以行来给元素布局,也就是说grid-auto-flow取值为row。让网格单元格沿着行布局,直到没有可放区域(列的方向),网格单元格会自动换行到下一行排列。哪怕没有显式的声明网格,浏览器也会为创建隐式网格的轨道,用来放自网格单元格。

在实际使用中,可以使用grid-auto-flow属性来做修改,只需要把其默认值row设置成column。网格中的单元将会按列显示,如果需要,还会自动添加列。

一起来看一个示例,你将更易理解:


复制代码
代码如下:

.wrapper {
width: 560px;
border: 1px solid orange;
padding: 15px;
margin: 20px auto;
display: grid;
grid-template-columns: repeat(6, 115px);
grid-template-rows: 115px 115px 115px;
grid-auto-flow: column;
}

效果如下:

使用CSS Grid布局实现网格的流动

在线案例

网格流与定位元素

前两介绍的都是网格容器所有子元素都是按照网格自动流排列。从上面简单的示例中可以得知,只要是网格容器中的子元素,通过grid-auto-flow都可以让其在网格容器中按列,或按行自动排列。可往往有些时候,有些网格需要做一些特殊定位处理。如果其中某个或某几个网格做了特殊处理,那么其他网格还会自动排列?我们将带着这个问题来一起看一个简单的示例:


复制代码
代码如下:
<code>.wrapper { width: 560px; border: 1px solid orange; padding: 15px; margin: 20px auto; display: grid; grid-template-columns: repeat(5, 115px); grid-template-rows: auto ;}.b { grid-column: 3 / 6; grid-row: 2 / 3; outline: 2px solid red;}.f { grid-area: 3 / 1 / 4 / 6; background-color: #f36; outline: 2px solid red;}</code>

效果如下:

使用CSS Grid布局实现网格的流动

在线案例

在这个示例中,盒子.b,通过网格线,将B重新定位新位置上,但这样并没有影响网格的自动流。.b所在的默认位置将由其后面的.c元素补上。同样的,.f元素重新定位后,别的元素补上。而且.f扩展占有多个网格单元格,那么其他的单元格就会自动往后移。如上图所示。

总结

文章中通过简单示例向大家演示了CSS Grid Layout中网格单元格自动排列的实现方法,以及如何通过grid-auto-flow来显式设置自动排列的方向。最后用一个示例向大家展示了,自动排列的网格中,其中某个或某向个网格单元格显式定位后,是否会对网格自动流造成一定的影响。不过如果你看到最后一个示例时,你将不会再质问这个问题。因为效果告诉你一切。

另外网格自动流配合margin和媒体查询将能更好实现Web中相册相关布局,产品展示相关布局。当然你也还可以在这个基础上扩展出更有意义的布局效果。

HTML / CSS 相关文章推荐
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 #HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 #HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 #HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 #HTML / CSS
纯css3实现照片墙效果
Dec 26 #HTML / CSS
纯css3实现走马灯效果
Dec 26 #HTML / CSS
纯CSS3实现的阴影效果
Dec 24 #HTML / CSS
You might like
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python用GET方法上传文件
2015/03/10 Python
python变量不能以数字打头详解
2016/07/06 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
保安自我鉴定范文
2013/12/08 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
SQL Server实现分页方法介绍
2022/03/16 SQL Server