CSS Grid步骤组件列宽随长内容异常变化问题求助

问题根源 #

当跨全列的步骤主体包含超长内容时，CSS Grid布局算法会优先满足跨列元素的宽度需求，导致minmax(100px, auto)的列宽规则失效——auto被网格算法视为1fr来均分容器宽度，而非适配步骤头部的实际内容宽度。

修复方案 #

将网格列宽规则中的auto替换为max-content，同时添加justify-content: start避免列被强制拉伸：

.stepper {
  display: grid;
  /* 用max-content替代auto，确保列宽适配头部内容 */
  grid-template-columns: repeat(var(--steps-count), minmax(100px, max-content));
  row-gap: 8px;
  font-family: "Roboto", sans-serif;
  /* 防止列被拉伸填满容器，维持头部内容的自适应宽度 */
  justify-content: start;
}

.step__body {
  display: none;
  grid-row-start: 2;
  grid-column: span var(--steps-count);
  padding: 16px;
  /* 确保主体内容在列宽总和范围内自动换行 */
  box-sizing: border-box;
}

方案说明 #

• max-content让列宽优先匹配步骤头部的内容宽度，minmax(100px, ...)保证列宽不低于设定的最小值；
• justify-content: start阻止网格将列强制拉伸以填满容器，维持头部内容的自适应宽度；
• box-sizing: border-box确保步骤主体的内边距不会额外增加宽度，内容可正常换行。

修改后的完整示例（含长内容步骤） #

.stepper {
  display: grid;
  grid-template-columns: repeat(var(--steps-count), minmax(100px, max-content));
  row-gap: 8px;
  font-family: "Roboto", sans-serif;
  justify-content: start;
}

.step {
  display: contents;
}

.step__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000;
  color: #fff;
  padding: 8px;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #fff;
}

.step__body {
  display: none;
  grid-row-start: 2;
  grid-column: span var(--steps-count);
  padding: 16px;
  box-sizing: border-box;
}

.step__content {
  display: none;
}

.step__header-text {
  width: 100%;
  text-align: center;
}

.step__header-title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.step__header-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 12px;
}

.step__header-indicator::after {
  content: "🍻";
}

.step--selected {
  color: #fff;
}

.step--selected .step__header {
  background: purple;
}

.step--selected .step__body {
  display: block;
  background: purple;
}

.step--selected .step__content {
  display: block;
}

<div class="stepper" style="--steps-count: 4">
  <div class="step" style="--step-index: 0">
    <div class="step__header-wrapper">
      <div class="step__header">
        <div class="step__header-indicator"></div>
        <div class="step__header-text">
          <div class="step__header-title">Step 1</div>
        </div>
      </div>
    </div>

    <div class="step__body">
      <div class="step__content">Step body 1</div>
    </div>
  </div>

  <div class="step" style="--step-index: 1">
    <div class="step__header-wrapper">
      <div class="step__header">
        <div class="step__header-indicator"></div>
        <div class="step__header-text">
          <div class="step__header-title">Step 2</div>
        </div>
      </div>
    </div>
    <div class="step__body">
      <div class="step__content">Step body 2</div>
    </div>
  </div>

  <div class="step step--selected" style="--step-index: 2">
    <div class="step__header-wrapper">
      <div class="step__header">
        <div class="step__header-indicator"></div>
        <div class="step__header-text">
          <div class="step__header-title">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </div>
      </div>
    </div>
    <div class="step__body">
      <div class="step__content">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien arcu, imperdiet sed augue ut, rhoncus elementum urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id ultricies libero, ac interdum
          justo. Donec auctor quam in neque commodo, eget auctor turpis condimentum. Integer blandit urna vitae nisi bibendum luctus. Ut a laoreet purus, vel dictum nibh. Vestibulum non faucibus mi, eu tempor lectus. Mauris in varius lacus. Nullam pretium
          at felis nec pharetra. Suspendisse dui ex, ullamcorper ac scelerisque ut, fermentum at urna. Aliquam efficitur, leo et egestas convallis, sapien tortor tincidunt velit, a faucibus ligula dui ac eros. Nunc sed sagittis orci. Fusce quam est, convallis
          ac commodo eget, tincidunt non erat.</div>
      </div>
    </div>
  </div>

  <div class="step" style="--step-index: 3">
    <div class="step__header-wrapper">
      <div class="step__header">
        <div class="step__header-indicator"></div>
        <div class="step__header-text">
          <div class="step__header-title">Step 4</div>
        </div>
      </div>
    </div>
    <div class="step__body">
      <div class="step__content">Step body 4</div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者m.popov