如何设置CSS Grid列宽始终占满可用空间 消除列间多余间距

核心原因 #

你遇到的问题是两种布局规则冲突导致的：

• 初始使用grid-template-columns: auto auto auto时，auto关键字的规则是根据列内容长度动态分配宽度，内容长度不一致就会出现列宽不均、间隙异常的问题，换成1fr 1fr 1fr的思路是正确的，1fr会平均分配容器的可用宽度。
• 你在第一列的.column元素上添加了Bootstrap的col-3、offset-md-2类，这两个类会强制设置元素宽度为父容器的25%，且在中等以上尺寸屏幕添加16.666%的左侧外边距，直接覆盖了CSS Grid分配的1fr宽度规则，额外增加的边距也会导致列之间出现多余空隙。
• 此外Bootstrap默认的.row类自带左右负边距、col-*类自带左右内边距，也会挤占列内的可用宽度，导致文本无法占满列空间。

解决步骤 #

1. 移除第一列多余的Bootstrap栅格类，既然已经用CSS Grid做整体列布局，不需要再用Bootstrap栅格控制宽度和偏移，避免样式冲突。
2. 显式声明Grid容器的间隙为0，避免继承其他样式导致的默认间隙，同时保证容器本身占满可用宽度。
3. 给列元素和内部文本元素设置宽度100%，确保内容完全占满Grid分配的列宽，若保留.row类可清除其默认负边距。

最终代码示例 #

CSS代码 #

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0; /* 明确列/行之间无额外间距 */
  width: 100%;
}

.column {
  background-color: #cccccc;
  width: 100%;
  /* 可根据需要调整内边距，不需要可设为0 */
  padding: 0 15px;
}

/* 若需要保留HTML中的.row类，添加这段清除默认负边距，不需要可省略 */
.column .row {
  margin-left: 0;
  margin-right: 0;
}

.column label, .column p {
  width: 100%;
}

HTML代码 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container" *ngIf="selectedMenuItem === menu[3]">
  <div class="column">
    <div class="row">
        <label>This is a test of column 100%</label>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test Test Test, Test/Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test; Test/Test</label>
      </div>
    </div>

  </div>
  <div class="column">
    <p>Column 2 </p>
  </div>
  <div class="column">
    <p>Column 3 </p>
  </div>
</div>

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