CSS 网格列随着长内容改变大小

Question

我正在使用 CSS 网格构建步进组件。

网格有两行，其列数基于步进器中的步数。

每一步都有一个header和一个body。 每一步 header 都位于第 1 行，并且恰好占据网格的一列。

我已将每个步骤 header 设置为与其内容一样大并拉伸直到达到其兄弟姐妹的最小宽度。

grid-template-columns: repeat(var(--steps-count), minmax(100px, auto));

每个步骤的主体从第 2 行开始，跨越第一行的列数，只有选定步骤的主体可见，其他所有步骤都隐藏。

问题：如果步骤正文的内容很短，则网格自动列按预期工作，但如果正文有大量内容，如示例 1 中的第 3 步，则网格中的所有列看起来都相同大小，就像这些列不再尊重minmax() function 中的auto并且表现得就像它们都设置为1fr 一样。

修复：我发现的唯一修复是明确设置 step body 容器的宽度以匹配整个 stepper 的宽度。 我真的想避免这种情况，因为步骤标题的内容可以在运行时更改。

示例 1 - 正文内容较大的步骤

 .stepper { display: grid; grid-template-columns: repeat(var(--steps-count), minmax(100px, auto)); row-gap: 8px; font-family: "Roboto", sans-serif; }.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; }.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>

示例 2 - 正文内容较小的步骤

 @charset "UTF-8"; .stepper { display: grid; grid-template-columns: repeat(var(--steps-count), minmax(100px, auto)); row-gap: 8px; font-family: "Roboto", sans-serif; }.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; }.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>step 3 short content</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>

Answer 1

几点观察：

1. 当正文内容换行时，列会中断。 导致问题的不仅仅是“大量内容”，而是包装。

   步进器的主体保留列宽，直到内容换行。 然后列开始缩小，并随着更多内容的添加而继续缩小，直到列达到相等的宽度。

   就像你说的，他们“表现得就像他们都设置为1fr ” 。

2. 问题是grid-template-columns中minmax参数中的auto值。 出于某种原因（我现在没有时间研究这个）， auto值会在换行时调整列的大小。

3. 也许从auto切换到min-content 。

（也许@TemaniAfif 可以提供帮助。我会联系他。）

Answer 2

正如@MichaelBenjamin 所说，它与身体的内容有关。 当它超过某个大小时，列大小的计算行为会有所不同。

我将尝试获取此类计算的详细信息，但解决方案是使用width:0;min-width:100%;确保主体不会对网格大小计算做出贡献。

 .stepper { display: grid; grid-template-columns: repeat(var(--steps-count), minmax(100px, auto)); row-gap: 8px; font-family: "Roboto", sans-serif; }.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; width: 0; min-width: 100%; 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>

width:0将禁用大小贡献， min-width:100%将确保您的内容填满所有可用空间（由其他内容定义）