CSS Grid固定宽度元素设置grid-column-end对齐溢出问题

• 网格内元素需要设置固定宽度，尝试将其右对齐到指定网格列时出现元素溢出
• 移除width属性虽然可以解决溢出问题，但不符合实际使用需求
• 直接使用grid-column设置列跨度控制宽度可以正常生效，但无法灵活控制元素本身的固定尺寸
• 尝试过让容器跨越网格1-4列再对齐内部内容的方案，操作存在问题，未达到预期效果

给.controls元素仅设置了grid-column-end: 4，没有明确指定列起始位置，网格布局会自动计算该元素的起始列。同时网格项默认的justify-self属性值为stretch：不设置固定宽度时，元素会自动拉伸占满分配到的网格区域；一旦设置了小于/大于分配区域的固定宽度，拉伸行为失效，元素会默认靠区域起始边放置，宽度超出区域时就会出现溢出。
之前尝试的「容器跨1-4列再对齐内部内容」的方案逻辑是可行的，只是多了一层不必要的嵌套，直接用网格自带的对齐属性就能实现需求。

不需要额外嵌套容器，仅需修改.controls的样式即可：

1. 明确指定元素占据的网格范围为1-4列，让布局区域固定
2. 设置justify-self: end，让固定宽度的元素在自身占据的网格区域内右对齐，既保留自定义固定宽度，也不会出现溢出

修改后的.controls样式：

.controls {
  width: 9rem;
  height: 3rem;
  grid-column: 1 / 4; /* 明确指定元素占据第1到第4列的网格区域 */
  justify-self: end; /* 元素在自身网格区域内右对齐 */
  background-color: white;
}

CSS 部分 #

* {
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  grid-gap: 1rem;
  align-content: start;
  height: 100vh;
  width: 100%;
  padding: 1rem;
  background-color: firebrick;
}
.section {
  display: flex;
  justify-content: center;
  align-items: center;
 
  height: 8rem;

  background-color: white;
}

.section-1 {
    grid-column: 1/4;
}
.section-2 {
  grid-column: 1/4;
}
.section-3 {
  grid-column: 4/6;
  grid-row-start: 1;
}

.controls {
  width: 9rem;
  height: 3rem;
  grid-column: 1 / 4;
  justify-self: end;
  background-color: white;
}

HTML 部分 #

<div class="container">
  <div class="section section-1">Section 1</div>
  <div class="controls">
    <div class="control-btn"></div>
    <div class="control-btn"></div>
    <div class="control-btn"></div>
  </div>
  <div class="section section-2">Section 2</div>
  <div class="section section-3">Section 3</div>
</div>

实现效果：.controls元素会保持9rem的固定宽度，右对齐到第4列的边缘，无溢出问题，也不需要额外嵌套容器调整对齐。

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