APP下载

Firefox开始支援CSS Grid Level 2子网格,能产生过去不可能出现的网格布局

消息来源:baojiabao.com 作者: 发布时间:2024-03-29

报价宝综合消息Firefox开始支援CSS Grid Level 2子网格,能产生过去不可能出现的网格布局

目前还未在任何浏览器支援的CSS Grid Level 2的子网格(Subgrid)功能,现在已经在Firefox中实作,Subgrid可以帮助开发者简化使用CSS Grid建立复杂网页布局的工作,甚至能够开发过去无法出现的样式。现在想尝鲜的开发者,可以下载Firefox Nightly先行测试。

在语法上Subgrid是grid-template-columns和grid-template-rows新的属性关键字,以grid-template-columns为例,使用者原本可以在后面指定字段的数量以及每个字段大小,而现在还能直接指定为Subgrid,而这会让grid-template-columns属性使用父级Div元素所定义的字段大小和数量。

另外,Subgrid的功能也能让开发者建置一些特殊的样式,像是Subgrid预设继承gap属性,不过使用者也能以Subgrid的gap、row-gap或是column-gap属性覆写。而Subgrid的行名,将继承自父网格,因此开发者可以使用主网格上的名称,在Subgrid中定位物件。

虽然Subgrid是一个小功能更新,对于使用网格布局的网页开发人员,不会有学习上的困难,但是Subgrid的出现,却让过去难以实现的布局样式成为可能,Mozilla举例,像是过去卡片布局,卡片各有自己的头中尾三部分,三部分都有不相等的内容,在过去标准的巢状网格中,是无法让每个网格的头尾都对齐,因为每张卡上的网格都是独立,卡片之间的列无法互相影响。

但现在grid-template-rows可以使用Subgrid属性则解决了这个问题,由于列的定义由父级决定,因此每个卡片的尾部都在同一列,当其中有一卡片尾部比较高,则会让同一列的所有卡片尾部跟着变高。

Mozilla也为Firefox中的DevTools加入对子网格的支援,开发者现在可以在DevTools中同时显示多个网格,以方便理解网格互相的关系以及排列,尤其是与父网格对齐的状况。

2019-06-08 00:54:00

相关文章