Grid布局：实现第二行单元格宽度独立于第一行

现有如下Grid布局代码，大屏下显示为一行7个单元格；当屏幕宽度低于1070px时，c5、c6、c7会换行至第二行，但当前效果中第二行单元格宽度受第一行列宽限制。现希望基于现有HTML代码，实现第二行单元格宽度独立（例如各占33%）的效果，询问是否可行及实现方法。

原有代码 #

HTML代码 #

<div class="grid">
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
    <div class="c4">4</div>
    <div class="c5">5</div>
    <div class="c6">6</div>
    <div class="c7">7</div>
</div>

CSS代码 #

.grid {display: grid; width: 100%; grid-template-columns: 50px auto 70px 250px 60px 60px 60px;}
@media screen and (max-width: 1070px) {
.grid {grid-template-columns: 50px auto 70px 250px;}
.grid .c5 {grid-column-start: 1;}
}

实现方案 #

可行，以下是两种简洁的实现方法：

方法一：利用自动网格列（推荐） #

通过grid-auto-columns定义新行的列宽规则，结合grid-auto-flow实现元素自动换行，代码如下：

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px auto 70px 250px 60px 60px 60px;
  gap: 8px; /* 可选，增加单元格间距提升美观度 */
}

@media screen and (max-width: 1070px) {
  .grid {
    /* 第一行保持原有4列宽度设置 */
    grid-template-columns: 50px auto 70px 250px;
    /* 自动生成的新列设为等宽占比 */
    grid-auto-columns: 1fr;
    /* 允许元素自动填充到合适的行位 */
    grid-auto-flow: dense;
  }

  .grid .c5 {
    /* 强制从第一列开始，开启新行 */
    grid-column-start: 1;
  }

  .grid .c5,
  .grid .c6,
  .grid .c7 {
    /* 每个元素占1个自动列，第二行三元素各占约33%宽度 */
    grid-column: span 1;
    grid-row: 2;
  }
}

方法二：明确定义多行布局模板 #

通过grid-template-areas划分两行布局结构，直接指定每个元素的位置和宽度：

.grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px auto 70px 250px 60px 60px 60px;
  gap: 8px;
}

@media screen and (max-width: 1070px) {
  .grid {
    /* 定义两行布局模板：第一行4列，第二行3列占位 */
    grid-template-areas: 
      "c1 c2 c3 c4"
      "c5 c6 c7 .";
    grid-template-columns: 50px auto 70px 250px;
  }

  /* 为每个元素绑定对应布局区域 */
  .grid .c1 { grid-area: c1; }
  .grid .c2 { grid-area: c2; }
  .grid .c3 { grid-area: c3; }
  .grid .c4 { grid-area: c4; }
  .grid .c5 { grid-area: c5; width: 100%; }
  .grid .c6 { grid-area: c6; width: 100%; }
  .grid .c7 { grid-area: c7; width: 100%; }
}

原理说明 #

• 方法一中，grid-auto-columns:1fr让新生成的列自动等分容器宽度，grid-column:span 1确保第二行每个元素占1列，自然实现约33%的宽度占比（含间距）。
• 方法二中，通过grid-template-areas明确布局结构，第二行的三个元素会自动填充对应区域的宽度，配合width:100%占满所在列空间。

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