CSS Grid布局教程之什么是网格布局


Posted in HTML / CSS onDecember 30, 2014

CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中,被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格,也就是早期的960gs。不管是网格还是栅格或者现在的CSS Grid Layout Module,我想掌握这些技术对于我们将来在Web项目中实现布局只有好处没有坏处。那么从今天开始我将和大家一起探讨CSS中的网格布局。

为什么我们需要网格布局?

在我们的Web内容中,可以将其分割成很多个内容块,而这些内容块都占据自己的区域(regions),可以将这些区域想像成是一个虚拟的网格。到目前为止,在一个模板中使用不同的结构标签,使用多个浮动和手动计算实现一个布局。这对于Web前端人员来说,这是一件痛苦之事。而网格布局将让你摆脱这样的困局,让你的布局方法变得非常简单与清晰。

网格布局给了我们一种方法——创建的结构与使用表格(table)布局并没有什么不同。然而,他是在CSS中实现而不是在HTML中实现,同时还可以依赖于媒体查询根据不同的上下文得新定义布局。这对于喜欢响应式设计的同学来说是一个绝对利好的消息。因为你不在需要再担心你的HTML结构而影响你的布局。

网格布局还可以让我们摆脱现在布局中存在的文档流限制,换句话说,你的结构不需要根据设计稿从上往上布置了。这也意味着您可以自由地更改页面元素位置。这最适合你在不同的断点位置实现你最需要的布局,而不再需要为响应你的设计而担心HTML结构的问题。

什么是CSS Grid Layout?

CSS Grid Layout是CSS为布局新增的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间,或者定义他们的大小、位置以及层级。

就像表格一样,网格布局可以让Web设计师根据元素按列或行对齐排列,但他和表格不同,网格布局没有内容结构,从而使各种布局不可能与表格一样。例如,一个网格布局中的子元素都可以定位自己的位置,这样他们可以重叠和类似元素定位。

此外,没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性,可以控制网格布局容器和他们的子元素,使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位,而不需要去改变文档结构的本质内容。

浏览器兼容性

众观下来,仅在IE10+上支持,而且也仅支持部分属性。或许很多同学看到这样的兼容性,又会止步,或者呵呵两声闪人了。不过我们学习是无防,在各浏览器中通过设置可以做测试效果,在下一次中将会向大家介绍如何在浏览器中开启此功能。

Grid vs Flexbox

www-list邮件中常常会看到一种Pk的现像:谈到网格就会扯到Flexbox。假设浏览器都支持这两个模块,你将选择grid还是flexbox来给页面布局。其实当你了解两者之后你会很轻松的做出选择。flexbox是一维布局,他只能在一条直线上放置你的内容区块;而grid是一个二维布局。前面也简单说到,你可以根据你的设计需求,将内容区块放置到任何你想要放的地方。那么不用多说,你应该知道哪一种更适合你的布局。

网格术语

想要玩转CSS Grid Layout,就需要先了解网格给我们的一些新术语以及一些CSS属性和值。在这一节中,将简单的向大家解释网格布局中的一些概念与术语。

网格线(Grid Lines)

网格线组成了网格,他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。

CSS Grid布局教程之什么是网格布局

上图突出显示的红线就是第二列的网格线(line2)。

网格轨道(Grid Track)

网格轨道是就是相邻两条网格线之间的空间,就好比表格中行或列。所在在网格中其分为grid columngrid row。每个网格轨道可以设置一个大小,用来控制宽度或高度。

CSS Grid布局教程之什么是网格布局

图中突出显示的就是行线line2line3之间组成的网格轨道。

网格单元格(Grid Cell)

网格单元格是指四条网格线之间的空间。所以它是最小的单位,就像表格中的单元格。

CSS Grid布局教程之什么是网格布局

图中突出显示的单元格是由行线line2line3和列表line2line3组成的。

网格区域(Grid Area)

网格区域是由任意四条网格线组成的空间,所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。

CSS Grid布局教程之什么是网格布局

图中突出显示的网格区域是行线line1line3和列线line2line4之间的区域,其主要包括了四个网格单元格。

网格容器(Grid Containers)

通过使用display属性给元素显式设置了属性值gridinline-grid,此时这个元素将自动变成网格容器。这个类似于flexbox一样,将元素设置设置为display:flex,元素将自动变成弹性盒模型。

由于网格容器不是块容器,所以有部分属性在网格布局中将会失效:

多列布局模块中的所有column-*属性运用在网格容器上将失效floatclear使用在网格项目(网格单元格Grid Cell)上将失效vertical-align使用在网格单元格上将失效::first-line::first-letter这样的伪元素不能应用在网格容器上网格单元格顺序(order)

网格单元格顺序和Flexbox模块一样,通过order属性来对网格单父元格进行顺序重排。

总结

在这篇文章中简单的介绍了CSS Grid Layout,以及为什么要使用他,并且介绍了其一些术语:网格线、网格轨道、网格单元格、网格区域和网格容器等,为后面如何学习和使用CSS Grid Layout做了一个铺垫。希望这篇文章对于初学者有所帮助,如果您对此篇文章感兴趣,请继续观注下一篇相关文章,将会向大家介绍如何在浏览器中开启CSS Grid Layout模块,让你的测试用例能在浏览器中看到相关效果。

HTML / CSS 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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
纯css3实现照片墙效果
Dec 26 #HTML / CSS
纯css3实现走马灯效果
Dec 26 #HTML / CSS
You might like
简单的php 验证图片生成函数
2009/05/21 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript 写类方式之一
2009/07/05 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python正则表达式知识汇总
2017/09/22 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
django 微信网页授权登陆的实现
2019/07/30 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
django 模型中的计算字段实例
2020/05/19 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
EJB面试题
2015/07/28 面试题
超市业务员岗位职责
2013/12/05 职场文书
新闻发布会策划方案
2014/06/12 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
英文商务邀请函范文
2015/01/31 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
创业计划书之寿司
2019/07/19 职场文书
golang正则之命名分组方式
2021/04/25 Golang