如何让Bento 2占据Bento 1剩余宽度并调整至布局中间？

实现思路 #

1. 让bento-2占据bento-1剩余空间：通过CSS Grid定义两列，第一列固定70%宽度，第二列自动填充剩余空间；同时让bento-1跨两行，占据左侧整列高度。
2. 将bento-2居中到四个区域的中间：利用Grid的place-self: center属性，让bento-2在自身网格单元格内垂直水平居中，结合跨两行的设置，就能处于右侧区域的中心位置（对应原四个便当盒的中间区域）。

完整代码示例 #

HTML

<div class="bento-container">
  <div class="bento-item bento-1">Bento 1</div>
  <div class="bento-item bento-2">Bento 2</div>
  <!-- 若保留原四个便当盒区域，可添加以下两个元素 -->
  <!-- <div class="bento-item bento-3">Bento 3</div>
  <div class="bento-item bento-4">Bento 4</div> -->
</div>

CSS

.bento-container {
  display: grid;
  /* 第一列70%宽，第二列自动占剩余空间 */
  grid-template-columns: 70% 1fr;
  /* 两行高度均分 */
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 500px; /* 可按需调整高度 */
  gap: 10px; /* 便当盒间距 */
  padding: 10px;
  box-sizing: border-box;
}

.bento-item {
  border: 2px solid #333;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.bento-1 {
  /* 跨两行占据左侧整列 */
  grid-row: 1 / -1;
  background-color: #fdd835;
}

.bento-2 {
  /* 跨两行占据右侧整列，并居中 */
  grid-row: 1 / -1;
  place-self: center;
  /* 自定义宽高避免占满右侧区域 */
  width: 80%;
  height: 60%;
  background-color: #4caf50;
}

/* 若保留四个便当盒区域的结构，可替换为以下配置：
.bento-container {
  grid-template-columns: 70% 30%;
  grid-template-rows: 1fr 1fr;
}
.bento-1 { grid-column: 1 / 2; grid-row: 1 / 2; }
.bento-3 { grid-column: 1 / 2; grid-row: 2 / 3; }
.bento-2 { grid-column: 2 / 3; grid-row: 1 / -1; place-self: center; }
此时bento-2正好处于四个区域的中间位置 */

关键说明 #

• grid-template-columns: 70% 1fr比纯百分比更灵活，能自动计算剩余空间，避免宽度计算误差。
• grid-row: 1 / -1让元素跨越所有行，确保bento-1和bento-2分别占据左右侧完整高度。
• place-self: center等价于align-self: center + justify-self: center，能快速实现元素在网格单元格内的居中，完美匹配“四个区域中间位置”的需求。

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