能否用CSS Grid而非Flexbox划分网格内部元素水平空间？

其实不用纠结等display: contents的支持度上来，现阶段完全可以用纯CSS Grid或者「Flex+Grid组合」来实现你要的双层水平空间划分，没必要依赖那个兼容性存疑的属性。

给你两个实用方案：

• 方案一：全容器改用Grid布局
  直接把整个父容器设置为Grid，同时定义好行和列规则。第一行的元素通过grid-column: 1 / -1占满所有列，实现和Flexbox一样的水平撑满效果；第二行的子元素则自动遵循Grid的列分配规则。示例代码：

  .parent-container {
    display: grid;
    grid-template-rows: auto auto; /* 两行高度自适应内容 */
    grid-template-columns: 1fr 3fr 1fr; /* 第二行的列比例，按需调整 */
    gap: 10px; /* 可选，添加元素间距 */
  }
  
  .top-row-element {
    grid-column: 1 / -1; /* 占满所有列，实现水平全宽 */
  }
  

  这种方式完全抛弃Flexbox，只用Grid就能搞定所有水平空间划分，兼容性拉满。

• 方案二：保留第一行Flex，第二行单独用Grid
  如果第一行的Flex布局已经写了大量样式不想改动，那直接给第二行的容器单独设置Grid布局即可，完全不需要display: contents。示例：

  .top-row {
    display: flex;
    /* 你原有的Flex样式 */
  }
  
  .bottom-row {
    display: grid;
    grid-template-columns: 20% 60% 20%; /* 第二行的列分配规则 */
  }
  

  这样第一行继续用Flex撑满水平空间，第二行的内部元素通过Grid列规则划分空间，两者互不干扰，兼容性同样优秀。

关于兼容性的补充 #

现在CSS Grid的支持度已经覆盖了几乎所有现代浏览器（Chrome、Firefox、Safari、Edge等），只有非常老旧的IE浏览器不支持，而这类浏览器现在几乎已经退出主流使用场景。相反，display: contents至今仍存在一些兼容性坑（比如部分移动端浏览器的布局异常），完全没必要为了它等待。

所以结论是：不用等display: contents，现在就可以用CSS Grid来实现第二行的水平空间划分，无论是全Grid还是Flex+Grid组合，都是比依赖display: contents更稳妥的选择。

内容的提问来源于stack exchange，提问作者lellefood