CSS Grid布局问题：设置第二行第4个盒子宽度为100px

要实现你想要的布局，只需要调整第4个和第5个盒子的网格定位属性即可，具体修改如下：

修改要点 #

1. 移除第4个盒子的grid-column: span 3，改为让它仅占据第二行的第一列：

   .box:nth-child(4) {
     grid-column: 1; /* 固定在第一列，宽度100px */
   }
   

2. 强制第5个盒子从第三行开始排列，避免它填充第二行的剩余空间：

   .box:nth-child(5) {
     grid-row: 3; /* 指定从第三行开始 */
   }
   

完整代码 #

CSS #

.one { background: red; }
.two { background: green; }
.three { background: blue; }
.four { background: pink; }
.five { background: violet; }
.six { background: yellow; }
.seven { background: teal; }
.box { padding: 5px; text-align: center; }
.container {
  border: 1px solid;
  display: grid;
  grid-template-columns: 100px 100px auto;
  gap: 20px 10px;
}

.box:nth-child(4) {
  grid-column: 1; /* 修改这里 */
}

.box:nth-child(5) {
  grid-row: 3; /* 添加这个规则 */
}

.box:last-child {
  grid-column-end: span 3;
}

HTML #

<div class="container">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
  <div class="box five">5</div>
  <div class="box six">6</div>
  <div class="box seven">7</div>
</div>

效果说明 #

• 第4个盒子固定在第二行第一列，宽度为100px，第二行剩余区域留空
• 第5、6个盒子自动排列在第三行，分别占据前两列的100px宽度
• 第7个盒子依然占据整行三列的宽度

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