CSS Grid Layout一些有趣的事情(1)

几周前,我举办了一个有关于CSS Grid Layout的研讨会。我和大多数人一样,对这个话题也很陌生,我在准备PPT和DEMO的时候学到了很多东西。我决定和大家一起分享一些我觉得其中特别感兴趣的东西。

希望大家对这些也会感兴趣。

可能和会使用小于的负值

在许多代码示例和教程中,您可能看到过可以使用和(或者简写),从第一列网格线到第二列网格线创建一个网格标签(创建一个跨列网格)。我的朋友@Max让我意识到,使用比更小的值也是可以的:

例如,你可以设置,单元格跨越第一个和第二个列:

上面示例,创建了一个三列网格,其中跨三列(等同于);跨两列(等同于);(等同于)

左侧用的是正值,右侧用的是负值

也可以使用负值

关于负值的另一个有趣的事情是,你可以在或中使用它们(负值)。正负值差别是,位置将从相反的方向开始。如果你设置了,那么该项目(网格项目)将被放置在第最后一列。

.item{

grid-column-start:-3;grid-row:-2;

}

左侧是负值;右侧是正值

如果网格线序号为负值时,以开始,从后往前计算。垂直网格线(列网格线)是从右向左,以开始计算;水平网格线(行网格线)是从下向上,以开始计算。同样以一个(三列两行)的网格为例,其负数的网格线序列号可以像下图那样表示:

有关于这方面的详细介绍可以阅读《CSS Grid布局:图解网格布局中术语之一》一文。

伪元素和生成的内容被视为网格项目

很明显,CSS伪元素生成的内容如果在一个网格容器中就变成了网格项目,但我不敢确定是否如此。所以我创建了一个Demo来验证它。在下面的示例中,你可以看到生成的元素如果在相应的容器中将成为网格或Flex项目。

用于Animation中的CSS Grid Layout属性

根据CSS Grid Layout Module Level1规范中可以得知,CSS Grid Layout有五个属性可以用于动画中:

、、

目前在Firefox浏览器中、和具有动画。我写了一篇关于CSS 布局动画属性相关的文章,在这篇文章中你可以了解到更多的细节和案例。

的值可以小于的值

在CSS Grid Garden游戏的第四级中,我了解到了或者的值有可能比对应的或者的值要小。

.item:first-child{

grid-column-end:2;grid-column-start:4;

}

上述代码中的网格项目将从第4列网格线开始,在第2列网格线结束,换句话说,从第2列网格线开始,在第4列网格线结束。

在和中使用关键词

默认情况下,网格项目跨越单个单元格。如果你想要更改它,关键词可以非常方便的做到。例如,设置和将使用网格项目跨越两个单元格,从第一个列网格线到第三列网格线。

你还可以在中使用关键词。如果你设置了和,那么这个网格项目将被放置在最后一列,并跨越两个单元格,从倒数第3列网格线到最后列网格线。

和隐式命名网格线

如果你在网格中创建了网格区域,你将自动得到四个隐式命名的网格线,为行创建和,为列创建了和。通过将或后缀添加到网格区域名称中,它们就像其他命名的网格线名称一样可用。

Grid可以在Microsoft Edge的内部版本中使用

除了IE和Edge之外的所有主流浏览器都支持CSS Grid Layout。对于很多项目,你现在可以开始使用CSS Grid Layout。Microsoft Edge说不定很快就能支持CSS Grid Layout,因为其内部版本已经支持了。

如果你想了解有关于CSS Grid Layout更多的信息,请查看完整的网格指南、开始使用CSS Grid Layout、Grid By Example以及我在CodePen搜集的有关于CSS Grid Layout的案例。

在W3cplus站点也也相应的整理了很全面的CSS Grid Layout相关知识,另外我也在CodePen上整理了很多有关于CSS Grid Layout的案例。

本文根据@MANUEL MATUZOVIC的《A Collection of Interesting Facts about CSS Grid Layout》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://css-tricks.com/collection-interesting-facts-css-grid-layout。

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

扫码关注云+社区

领取腾讯云代金券