• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

CSS Grid布局可以这么玩

CSS3 web前端中文站 2年前 (2017-04-24) 970次浏览 已收录 0个评论

CSS3 Grid LayoutGridLayoutCSS3

自从去年下半年开始,CSS Grid 布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于 Web 布局而言,个人认为Grid 布局将是 Web 布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,采用了二维布局。@Rachel Andrew 也一直致力于完善Grid的规范。

就我个人而言,我也一直在不断的关注这个布局利器的相关更新,自从最初规范的出来,到目前规范的完善。在站上也不断的在更新CSS Grid 布局的使用。虽然这方向的教程已经很多了,但各有千秋,我追求以最简单,最直接的方式来阐述它的使用方式方法。让初学者能尽快的掌握其使用规则。

前段时间@Mirza Joldic 在 Medium 上发布了一篇文章,通过几个 Gif 动态非常形象的阐述了CSS Grid的几个核心概念以及使用方法,今天我就借花献佛,用这几张图让初学者快速掌握 CSS Grid的核心概念和使用技巧。

Web 布局的历史演变

自从 Web 出来至今,Web 的布局也经过了几个演变,下图可以一目了然:

CSS Grid 布局可以这么玩

有关于 Web 布局的演变史,去年也整理过一篇相关的文章简单的阐述了这方面的故事,如果你感兴趣的话,可以点击这里进行了解。在 Web 的学习过程中,学习 Web 布局是一个不可避免的过程,而随着前端技术的日新月异的变化,布局方式也在不断的更新,早在 2013 年@Peter Gasston 就对CSS布局的未来趋势就做过预判断,文章中就提供了 CSS Grid的布局。如果今天来看,这种趋势的预判是正确的,特别是今年 3 月份之后,各大主流浏览器都发布了对 CSS Grid 的支持。既然如此,学习 CSS Grid 相关的知识就很有必要。

既然掌握 CSS Grid 很有必要,那用什么样的方式能最快的掌握 CSS Grid 相关的知识呢?这很重要。 特别是@Mirza Joldic 在 Medium 上发布的文章,里面的动图让我耳目一新,通过简单的几张图,就把 CSS Grid 的几个核心介绍的非常清楚,我觉得很有必要拿出来与大家分享。

在继续下面的内容之前,再次感谢@Mirza Joldic 的付出。那咱们就不说废话了,开始今天的学习之旅。

CSS Grid 布局的介绍

学习 CSS Grid 布局更多的相关知识,我觉得通过一些工具会对大家的理解更有帮助,到目前为止,这方面的在线工具已经有很多种,比如:

  • GRID GARDEN:通过一个小游戏的方式,让你快速掌握 CSS Grid 的相关知识,这个有点类似于 FLEXBOX FROGGY
  • Griddy by @drewisthe
  • CSS Grid Cheat Sheet by @alialaa

下面的动图是使用@Mirza Joldic 写的 CSS Grid Playground 小工具。动图来了:

CSS Grid 布局可以这么玩

这里要提两个核心概念,这两个核心概念有点类似于 Flexbox 布局:

  • Grid 容器(对应 Flexbox 布局中的 Flex 容器)
  • Grid 项目(对应 Flexbox 布局中的 Flex 项目)

比如一个这样的 HTML 结构:

CSS Grid 布局可以这么玩

使用 CSS Grid 布局首要的第一步,就是通过display:grid;来对容器声明一个网格容器,那么这个div元素里面对应的子元素就自动成为网格项目。

CSS Grid 布局可以这么玩

虽然你在div.grid-container中设置了display:grid;,声明了这个元素为 Grid 容器,但在浏览器中,并看不到有任何的变化。但在在幕后中,他们还是发生了变化,div.grid-container是一个 Grid 容器,他的所有子元素就自动变成了网格项目。

接下来,使用grid-template-columns: 1fr 1fr 1fr;来定义三列网格:

CSS Grid 布局可以这么玩

从 gif 图中就明显的看出来,现在有点变化了,颜色块变小了,但很难区分出有何变化,为了让效果之间有更突出的差异,再给.grid-container中添加grid-gap:5px

CSS Grid 布局可以这么玩

看到变化了吧,整个网格分了三个列,单元格之间有5px的间距,同时每列的列宽是整个宽度的三分之一,那是因为我们采用了fr单位,而且把整个网格分成了三列,每列的宽度是1fr。这里告诉我们三个知识点:

  • grid-template-columns用来把网格指定列的宽度
  • grid-gap用来指定列(或行)的间距
  • fr可以自动根据网格容器的宽度来计算列的宽度

现在我们把grid-template-columns的值改成:1fr 2fr 1fr,对应的效果就会变成:

CSS Grid 布局可以这么玩

现在第二列的宽度是第一列和最后一列的两倍。这也再次证明fr单位的强大之处,使用它可以让你很容易定义你的网格尺寸。

现在越来越接近我们想要的网格。但需求是不断变化的,比如我们现在想让顶部的第一行尽可能的宽,比如说跨整个网格列(比如我们网页的头部,或者说我们常见的导航)。如此一来,只需要在第一个网格上使用grid-column: 1 / 4

CSS Grid 布局可以这么玩

或许第一次接触1 / 4会令你感到神秘,其实这个涉及到了 CSS Grid 中的重要概念之一,那就是网格线,其中第一个数字是列的起始网格线位置,第二个数字是线束网格线的位置。对于一个 CSS Grid,可以通过grid-template-columns创建列网格线,grid-template-rows创建行网格线。这种方式创建的是一种显式的网格线。当然,除了这种方式,还可以创建隐式网格线。除此之外,还可以使用grid-auto-rowsgrid-auto-columns可以创建一个隐式网格。这个隐式网格对应的网格线就被称之为隐式网格线。下图简单的展示了示例中的网格线示意图:

CSS Grid 布局可以这么玩

接下来,我们想要有一个300px的侧边栏高度,并且让他的位置是垂直方向的2 / 3。我们可以使用grid-row: 2 / 4来实现,这个特性和grid-column非常的类似。这个时候,效果变成这样:

CSS Grid 布局可以这么玩

其实 CSS Grid 看上去和表格非常的类似,在表格中我们有一个专业的术语,合并单元格。其实在 CSS Grid 布局中,我们同样有一个类似的特性,那就是在grid-column或者grid-row中引入关键词span,在关键词span后面紧跟一个数值,就是表示合并单元格的数量,先来看下图:

CSS Grid 布局可以这么玩

上面的示例中,我们使用到了grid-column: 2 / span 1grid-row: 2 / span 2。其中grid-column: 2 / span 1表示从列网格线2开始,跨度是1个列网格线(其实就是合并一个列单元格)。而grid-row: 2 / span 2表示的是从行网格线2开始,跨度是两个两个线(其实就是合并两个行单元格)。

接着我们来做页脚,在做页脚之前,我们先删除两个网格项目,因为不需要他们了。做页脚和做页头非常的类似,继续使用grid-column: 1 / 4即可:

CSS Grid 布局可以这么玩

通过上面的方式,我们可以轻易的控制网格,也能非常容易的实现一个 Web 面页的布局,比如一个三列的布局。但我们在布局中经常还需要控制对齐方式,特别是在 CSS Grid 的布局当中,比如下面的示例中,我们第三列并未占满整个高度,这个时候希望它能底部对齐。此时为了实现这样的效果,需要使用到 CSS 中的对齐模块特性,比如在这里,我们可以使用align-self: end来实现:

CSS Grid 布局可以这么玩

align-self是 CSS 中的一个新模块特性Box Alignment中的一个属性。有关于这个模块的的功能还是非常的实用。@Rachel Andrew 整理了一份 Box Alignment Cheatsheet,里面详细介绍了 Box Alignment 的使用。简单的来讲,这个规范中有三个关键部分:

  • Positional Alignment:关键词有startendcenter
  • Baseline Alignment:关键词有baselinefirst baselinelast baseline
  • Distributed Alignment:关键词有space-betweenspace-around

其实你要是对 Flexbox 熟悉的话,你或许感觉这个 Box Alignment 有点类似于 Flexbox 中的一些控制 Flex 项目对齐方式的属性。事实是这样的,如果你感兴趣想深入的了解这方面的相关知识,建议你花点时间阅读《Web 布局新系统:CSS Grid,Flexbox 和 Box Alignment》一文。

如果你对上面的相关知识有所了解的话,你就可以很轻易的使用 CSS Grid 相关知识实现一个常用的 Web 页面布局效果。比如下面这张图,为了好完,我把主内容的容器设置了具体的宽度,并且通过 Box Alignment 属性,让这个区域水平垂直居中:

CSS Grid 布局可以这么玩

整个题外话,虽然实现水平垂直居中的解决方案已有很多种了,但 Box Alignment 模块将是最佳方式。

如果你感兴趣的话,你也可以通过@Mirza Joldic 写的 CSS Grid Playground 小工具去尝试各式各样的网格布局效果。从而加强对 CSS Grid 的概念。当然,在使用它去做一些事情或者做一些创意之前,还是很有必要对 CSS Grid 基础要有一个简单的了解。个人建议你花点时间阅读一下下面几篇文章:

  • CSS Grid 布局:图解网格布局中术语之一
  • CSS Grid 布局:图解网格布局中术语二
  • CSS Grid 布局:图解网格布局中术语三
  • CSS Grid 布局指南

当然,如果你深入的学习 CSS Grid 的相关知识,个人强列你仔细阅读完这里的所有文章。其实我个人也是 CSS Grid 的极度爱好者,我将在这里不断的更新和发布有关于 CSS Grid 的相关文章。希望这些文章对你学习和使用 CSS Grid 有所帮助。

总结

这篇文章借助于@Mirza Joldic 写的 CSS Grid Playground 小工具以及博文中提供的动图,快速帮助大家理解 CSS Grid 的核心概念,以及快速使用这些知识掌握 CSS Grid 相关知识,从而通过掌握的 CSS Grid 知识创建自己想要的 Web 布局效果。虽然 CSS Grid 已经很强大了,但为了能更好的满足 Web 开发者的需求,它还在不断的更新,不断的提供和完善新特性,有关于这方面的变更,大家可以关注 W3C 规范的相关更新。当然也可以关注小站有关于CSS Grid相关更新。如果您有这方面的经验,欢迎在下面的评论中与我们一起分享。

web 前端中文站点评:

关于 Grid 的学习,这篇文章只是初步介绍了 Grid 的布局问题,接下来大家可以继续学习阅读《如何使用 CSS GRID 布局实现限宽容器全屏效果》、《CSS Grid 和 Flexbox 解决实际的布局问题》、《探讨 CSS GRID LAYOUT 在原生客户端中运用》和《深入理解 FLEX 布局以及计算》,形成对比学习。


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS Grid 布局可以这么玩
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址