如何用CSS Grid实现基于子内容动态调列数且限制元素最大高度？

可以通过CSS Grid结合内部内容的溢出控制实现你的需求，以下是调整后的方案：

核心问题分析 #

原代码的问题在于：按钮仅设置了max-height但未固定高度（导致内容溢出时高度可能突破限制），且内部内容没有溢出处理规则，同时Grid列的分配逻辑需要配合按钮的尺寸约束来确保一致性。

修改后的完整代码 #

CSS

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    max-width: 500px;
}

button {
    /* 固定高度，确保所有按钮高度一致且不超过80px */
    height: 80px;
    /* 继承Grid列的宽度，保证同列按钮宽度一致 */
    width: 100%;
    /* 内部内容垂直排布，合理分配空间 */
    display: flex;
    flex-direction: column;
    /* 溢出内容处理，避免突破按钮边界 */
    overflow: hidden;
    /* 可选：如果需要允许内容滚动，将overflow改为auto */
    /* overflow: auto; */
}

button p {
    /* 让描述文本自动折行，同时限制高度 */
    flex: 1;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 可选：多行省略，需浏览器支持 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

HTML

<div class="container">
  <button>
    <div>Button 1</div>
    <p>Description 1</p>
  </button>
  <button>
    <div>Button 2</div>
    <p>Description 2</p>
  </button>
  <button>
    <div>Button 3</div>
    <p>Description 3 Description 3 Description 3 Description 3 Description 3</p>
  </button>
  <button>
    <div>Button 4</div>
    <p>Description 4</p>
  </button>
  <button>
    <div>Button 5</div>
    <p>Description 5</p>
  </button>
  <button>
    <div>Button 6</div>
    <p>Description 6</p>
  </button>
</div>

方案说明 #

1. 尺寸一致性：通过给按钮设置固定height: 80px和width: 100%，确保所有按钮高度统一且宽度继承Grid列的分配结果，满足规则1和2。
2. 列数自适应：repeat(auto-fit, minmax(130px, 1fr))会根据容器宽度自动调整列数，每列宽度不小于130px，符合规则3。
3. 内容溢出处理：按钮内部用flex布局垂直排列元素，给描述文本设置溢出规则（省略号或滚动），避免内容突破按钮边界。

替代方案（如果需要内容驱动列宽） #

如果希望列宽由最长按钮的内容决定（而非容器宽度），CSS Grid的auto-fit无法直接实现，此时可以结合Flexbox和JavaScript：

• 用display: flex; flex-wrap: wrap;作为容器布局
• 通过JS计算所有按钮的内容宽度，取最大值作为每列的最小宽度，确保所有按钮宽度一致

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