CSS Grid布局教程之网格单元格布局


Posted in HTML / CSS onDecember 30, 2014

CSS Grid布局对于我等来说就是一个全新的布局,但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容(《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》)为这篇文章做足了铺垫。或许你想知道的是如何使用?各位看官不用太急,接下来通过各种实例向大家阐述CSS Grid布局,让我们一起领略其强大的魅力。

当然,接下来的示例不是我想出来的,这是我挖出来的,主要制作者是Rachel Andrew。在继续往下阅读之前,我们应该一起感谢Rachel Andrew,感谢他给我们提供这么多有关于CSS Grid Layout的示例。同时如果你想在你的浏览器中能正常的演示接下的有关于CSS Grid Layout的示例,你得先保证你已阅读了《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》一文,并且按照文章中的方法进行过设置。如果没有话,或许你将看不到下面示例的效果。咱也不纠结了,开始实战吧。

定义一个网格

可以给父容器的display属性设置为grid或者inline-grid来定义一个网格。这样你就可以使用grid-template-columnsgrid-template-rows属性来创建一个网格。

在这个示例中,创建了一个三列网格,其中三个列的列宽是100px,并且指定列与列之间的间距为10px。同时网格具有三行,每行的高度是自动的,另外行与行之间的间距是10px。简单点说就是一个三行三列的网格,并且列与列之间,行与行之间的间距都是10px

此时浏览器将容器中的子元素自动填入到每个网格单元格中,当超过指定的列数时,网格会自动换行,如下图所示:

CSS Grid布局教程之网格单元格布局

看看代码是怎么完成的:

HTML

复制代码
代码如下:
<font face="Courier New"><font face="Arial">
<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 g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
</div></font>
</font>

CSS

复制代码
代码如下:

body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
}
.b,.d,.g,.i {
background-color:red;
}

定义网格的关键代码:


复制代码
代码如下:

.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}

在线案例

从示例效果中可以看出,.wrapper容器通过display:grid;定义成网格,并且使用grid-template-columns:100px 10px 100px 10px 100px;grid-template-rows:auto 10px auto;指定了列宽、列间距,行高和行间距等。对应的子元素.a.c.e.f.h.j列宽度为100px(也就是黑色区域),而.b.d.g.i是列与列的间距10px(也就是红色区域)。而且当子元素在一行填不下时,就会自动换行,如.f.j自动换到第二行显示。

基于网格线的占位区

网格中的单元格是有网格线划分出来的,那么在网格布局中,同样可以使用网格线来给子元素设置占位区域。基于上例,在容器.wrapper下面有十个子元素.a~.j,接下来看如何通过基于网格线来实现各种在网格布局中的区域。

对于网格线,在网格布局中有两种,一种是列线,另一种是行线。对应的个网格单元格都有列线起始线(grid-column-start)、列线终止线(grid-column-end)和行线起始线(grid-row-start)、行线终止线(grid-row-end)。

CSS Grid布局教程之网格单元格布局

如上图所示,紫色的是列网格线,而蓝色的是行网格线,其中高亮大红的那个单元格列起始线是line3,列终止线是line4,行起始线是line3,行终止线是line4。也就是说这四条网格线间的区域是一个单元格。

接下来,看一个示例,如何用网格线实现单元格占位区域:

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 g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
</div>

CSS

复制代码
代码如下:

body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
text-align: center;
}
.a{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.c {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
}
.d {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 1;
grid-row-end: 2;
}
.e {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.f {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.g {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
}
.h {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 3;
grid-row-end: 4;
}
.i {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 6;
}
.j {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
}

CSS Grid布局教程之网格单元格布局

在线案例

这种方式可以让你的子元素.a~.b定位在任何位置,比如说,你现在想要.a.f对换,那么很简单就能实现:


复制代码
代码如下:
<font face="Courier New">
<font face="Arial">.a{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background:red;
}
.f {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
background:orange;
}</font>
</font>

运行的效果如下:

CSS Grid布局教程之网格单元格布局

在线案例

网格线简写

前面两个示例向大家演示了如何用网格线实现布局,可以说是简单方便,唯一就是写代码麻烦,要什么grid-column-startgrid-column-end等等。其实有一种简写方式,可以让你不再痛苦。

网格线的简写方式,其实就是grid-columngrid-rowstartend值合并在一起,两者之间用/来分隔。比如:


复制代码
代码如下:
<font face="Courier New">
<font face="Arial">.a{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}</font>
</font>

可以写成:


复制代码
代码如下:
<font face="Courier New">
<font face="Arial">.a{
grid-column: 1 / 2;
grid-row: 1 / 2;
}</font>
</font>

这样一来,上例的代码,我们就可以换成简写方式:


复制代码
代码如下:
<font face="Courier New">
<font face="Arial">.a{
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.c {
grid-column: 5 / 6;
grid-row: 1 / 2;
}
.d {
grid-column: 7 / 8;
grid-row: 1 / 2;
}
.e {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.f {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.g {
grid-column: 5 / 6;
grid-row: 3 / 4;
}
.h {
grid-column: 7 / 8;
grid-row: 3 / 4;
}
.i {
grid-column: 1 / 2;
grid-row: 5 / 6;
}
.j {
grid-column: 3 / 4;
grid-row: 5 / 6;
}</font>
</font>

效果依旧:

CSS Grid布局教程之网格单元格布局

在线案例

网格区域实现元素占位区

在CSS Grid Layout中有一个关键东东,网格区域grid-area。网格区域他是由四条网格线组成的一个空间,简单点说,一个网格单元格也是一个网格区域(因为他也是有四条网格线组成的一个空间),多个单元格合并在一起也是一个网格区域。这样一来,要实现上例的效果,还可以使用网格区域grid-area来完成。

在具体做案例之前,先简单的了解,网格区域是由哪几条网格线组成。组成网格区域的网格线顺序是row-start/column-start/row-end/column-end。每个网格线之间也是使用/来分隔。

接下来将上例使用网格区域改造一下,改造之后的样式代码如下:


复制代码
代码如下:
<font face="Courier New">
<font face="Arial">.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto;
}
.a{
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 1 / 3 / 2 /4;
}
.c {
grid-area: 1 / 5 / 2 / 6;
}
.d {
grid-area: 1 / 7 / 2 / 8;
}
.e {
grid-area: 3 / 1 / 4 / 2;
}
.f {
grid-area: 3 / 3 / 4 / 4;
}
.g {
grid-area: 3 / 5 / 4 / 6;
}
.h {
grid-area: 3 / 7 / 4 / 8;
}
.i {
grid-area: 5 / 1 / 6 / 2;
}
.j {
grid-area: 5 / 3 / 6 / 4;
}</font>
</font>

效果如下:

CSS Grid布局教程之网格单元格布局

在线案例

是不是让你的世界变得更简单了。

总结

在这篇文章中主要通过几个简单的实例向大家演示了如何使用定义网格,又是如何使用网格线实现单元格布局,可以说这样的布局弱爆了,和表格的单元格没有什么不一样嘛,但现实是残酷的,我们的布局是星罗万像,没有这么简单。不是说CSS Grid Layout很强大嘛,那又要如何实现一些复杂的布局呢?敬请观注下章分解,向大家阐述如何实现单元格合并效果。

HTML / CSS 相关文章推荐
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 #HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 #HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 #HTML / CSS
纯css3制作网站后台管理面板
Dec 30 #HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 #HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 #HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 #HTML / CSS
You might like
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
Python open读写文件实现脚本
2008/09/06 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
用C++封装MySQL的API的教程
2015/05/06 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
django fernet fields字段加密实践详解
2019/08/12 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
金鑫耀Java笔试题
2014/09/06 面试题
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
三年级学生评语大全
2014/12/26 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis