CSS Grid布局中的subgrid的适用场景-工具盒子

subgrid封面图

一、subgrid若干常识性知识

subgrid表示子网格，这个东西不是和Grid布局一起出来的，要滞后数年（CSS Grid Level2的内容），其兼容性么......对外的项目还要等个一两年，如果是内部的中台项目，则可以尝鲜了。

subgrid兼容性截图

subgrid并不是一个CSS属性，而是 grid-template-columns和grid-template-rows属性支持的关键字，其使用的场景需要外面已经有个Grid布局，否则......嗯，虽然语法上不会识别为异常，但是渲染结果上却是没有区别的。

例如：

.container {
    display: grid;
}
.item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: subgrid;
}

二、什么时候使用subgrid

Grid布局负责大的组织结构，而里面更细致的排版对齐效果，则可以使用subgrid布局。

实际上，subgrid布局其实并非必须的，因为Grid布局形成的尺寸是可计算尺寸，再其中使用Flex布局也可以实现诸多类似的效果。

这其实也是目前subgrid布局讨论声音不高，社区需求并不迫切的重要原因。

所以，对于subgrid，我不打算介绍过于深入与复杂的案例，只列举一个最适合使用其布局的场景，也是最近我做的一个项目，正好作为案例使用。

使用案例

一个项目列表页面，其中列表其中还有很多项，而其中的描述内容有多有少，无论内容多少，每一行这块的高度都要保持一致，如下截图所示：

目标布局截图效果

像这种规则的列表布局最适合使用Grid布局了，我们可以在列表容器上这么设置：

.container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

这里的repeat(auto-fill, minmax...是所有前端开发人员都必须掌握的实现方法，列表类弹性布局最佳实践代码，关于这里的repeat()函数，可以参见此文："CSS repeat()函数详细介绍"。

上面的实现，很多前端er都知道，那列表里面内容的关联对齐呢？

这种场景就是典型的subgrid布局。

假设HTML如下所示：

<div class="container">
    <section class="item">
        <h4>标题</h4>
        <p>负责人：张鑫旭</p>
        <blockquote>描述...</blockquote>
        <footer>3人参与 11月24日</footer>
    </section>
    ... <!-- 重复N次 -->
</div>

则我们可以这么处理，其中，下半部分CSS添加背景色与布局无关，主要是为了方便大家区分各个元素所占据的区域大小。

.container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: .5rem;
}
/* 以下CSS与布局无关 */
.item {
    padding: .75rem;
    background: #f0f3f9;
}
.item blockquote {
    background-color: skyblue;
}
.item h4 {
    background-color: #333;
    color: #fff;
}

此时，可以看到，所有Grid子项的子元素的高度在每一行都是等高的，如下截图所示：

subgrid应用截图示意