网格顶点的拉普拉斯算子_子网格在这里

对subgrid （CSS Grid Level 2规范的一部分）的支持刚刚在Firefox Nightly中登陆！ 要开始尝试它，您需要通过在浏览器中转到about：config ，然后搜索subgrid来启用该功能。 切换layout.css.grid模板-亚格子value.enabled和子网格为true。

现在还处于初期，但是仅仅几个小时的尝试就使我对这将带来的布局可能性感到非常兴奋。 一旦subgrid得到了更广泛的支持，我认为它将为一些非常有趣的创意布局打开大门。

这是我今天一直在玩的一个快速演示：

演示地址

创建一个子网格非常简单。 父网格的子级需要display: grid ，以及grid-template-columns: subgrid或grid-template-rows: subgrid 。 子网格可以在行轴，列轴或两者上。 一个非常基本的示例CSS可能看起来像这样：

.grid{
  display: grid ;
  grid-template-columns:repeat( 3 , 1fr );
  grid-template-rows:repeat( 3 , 200px );
}

.grid-item{
  display: grid ;
  grid-template-columns: subgrid ;
  grid-column: 1 / span 2 ;
}

.subgrid-item{
  grid-column: 2 / 3 ;
}

如果您热衷于入门，已经有一些由Rachel Andrew撰写的有关MDN的文档 。

我期待着花费更多的时间进行实验和构建一些创意布局，而且我一定会很快写更多的信息！

翻译自: https://css-irl.info/subgrid-is-here/