如何让Grid子项占据最大宽度且不挤压其他子项换行

问题需求 #

要实现目标布局，让文本为“6”的item占据最大宽度，同时item5和item7保持在同一行（不被挤到新行）。尝试缩小item5和item7的宽度无效，需要用Grid布局实现类似Flexbox中flex:1的弹性占宽效果。

当前代码 #

CSS 代码 #

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #FFFBF1;
}
.grid{
    background: white;
    padding: 0.5rem;
    width: 50%;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.5rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 15px;
    padding: 1rem;
}
.item{
    background: #7FFFD4;
    display: flex; 
    justify-content: center;
    align-items: center;
    border-radius: 15px;
}
.item:nth-of-type(1){
    grid-column: 1/3;
}
.item:nth-of-type(4){
    grid-column: 2/4;
}
.item:nth-of-type(6){
    grid-column: 2/4;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   
    <title>Page title</title>
    
</head>
<body>
    
<div class="grid">
 <div class="item"> 1 </div>
  <div class="item">2 </div>
   <div class="item"> 3</div>
    <div class="item"> 4</div>
     <div class="item"> 5</div>
      <div class="item">6 </div>
       <div class="item">7 </div>
        <div class="item"> 8</div>
         <div class="item"> 9</div>
         <div class="item">10 </div>
         <div class="item"> 11</div>
         <div class="item">12 </div>
</div>

</body>
</html>

解决方法 #

核心是修改Grid的列模板，让中间列具备弹性占宽能力，同时调整item6的列定位：

1. 修改网格列定义
   将.grid的grid-template-columns从repeat(3,1fr)改为auto minmax(0, 1fr) auto：

.grid{
    /* 其他样式不变 */
    grid-template-columns: auto minmax(0, 1fr) auto;
}

• auto：左右列宽度由内部内容决定（适配item5、item7的宽度）
• minmax(0, 1fr)：中间列占据容器剩余的所有可用空间，实现类似Flexbox中flex:1的效果

2. 调整item6的列定位
   移除.item:nth-of-type(6)的grid-column:2/4，让它默认占据中间的弹性列：

/* 删除以下代码 */
.item:nth-of-type(6){
    grid-column: 2/4;
}

修改后，item5、6、7会自动排在同一行，item6占据最大宽度，左右的item5和item7仅占用自身内容所需宽度，且不会被挤到新行。

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