首页
学习
活动
专区
工具
TVP
发布

CSS Grid 布局快速教程

作者 | 刘星

CSS Grid 布局是 CSS 中最强大的布局系统(没有之一)。说起布局,另一个方便好用的Flex布局是避不开的,与 Flex 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。你可以把它想象成一个Table。本文不是一个大而全的教程,而是一个快速入门。

使用Grid 布局实现一个九宫格

与Flex 布局类似,Grid 布局由wrapper(父元素)和items(子元素)两部分组成。在介绍它的详细语法之前先来个例子: 九宫格

预览地址:https://codepen.io/ogilhinn/pen/mGdQZq

代码如下:

现在我们就得到了一个3X3的九宫格。

这儿用到了 属性,这两个属性用于创建列(columns)和行(rows)。 是 和 的缩写形式。上面的CSS可以缩写为:

指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。

这些几个属性都用于网格容器即父元素。

设置网格项(子元素)

与 Flex 一样,子元素也是可设置的,现在我们想把第一元素占据整行,修改CSS,让第一个元素从第一个网格线开始到第四的网格线结束。

如果你不明白我们设置的只有 3 列,为什么有4条网格线呢?看下面

当第一格占满后,剩下子元素将被挤到下一行(这儿为了好看,我们删除3个元素)。 与 可以缩写为

与 差不多,只是行与列的差别。为了加深印象,我们来让第二个元素占满第一列,如图

同样,可以缩写为

我还希望把3号元素占满剩下的灰色区域,通过上面学习几个属性我们可以很快实现这个小需求。(还是为了好看,我们再删除3个元素)

修改CSS,让3元素的行和列都设置为从第二个网格线到第四个网格线即可

如果你觉得这样写有点麻烦,我们还有另一种缩写 属性接受4个由'/'分开的值: , , , 最后是 。上例可修改为:

上面的这个结构,在实际中很常见 Header, Sidebar, Main。我们可以使用 属性 通过引用 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号( )代表一个空的网格单元。这个语法本身可视作网格的可视化结构。代码如下

网格模板区域(grid-template-areas)属性提供了一个可视化的网格结构,使网格容器的整体布局更容易被理解。

除了上文介绍的网格布局外 还有一些 之类的属性设置对齐方式,这儿就不一一举例了。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180821B1C1VZ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券