CSS网格等大小列答案

【问题标题】：CSS grid equal size columnsCSS网格等大小列
【发布时间】：2018-12-12 16:28:44
【问题描述】：

我正在尝试创建 3 个 div，每个包含 1 个

-tag 并使用 CSS 网格将所有 3 个以相等的宽度分布在同一行上。

大多数消息来源说我应该使用grid-template-columns 来实现这一点。有人说去1fr 1fr 1fr，有人说repeat(3, 1fr)，还有更多说repeat(3, auto)。

结果是一样的。 3 个 div 最终位于同一行，但它们的宽度会根据其内容的宽度而变化。有没有办法强制所有 3 个 div 具有相同的宽度，如果内容太宽，只需使用下一行？

sn-p 应该显示我所处的情况。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.content {
    margin: 2em;
}

    <div class="grid-container">
        <div class="content">
            <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
        <div class="content">
            <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
        <div class="content">
            <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
    </div>

【问题讨论】：

标签： css css-grid

【解决方案1】：

您的网格很好 - 内容是这里的问题。

您可以尝试word-break 或overflow 作为解决方法：

word-break解决方案：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px dotted green;
}

.content {
  margin: 2em;
  border: 2px solid red;
}

.content p {
  word-break: break-word;
}

<div class="grid-container">
  <div class="content">
    <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
  <div class="content">
    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
  <div class="content">
    <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
</div>

overflow解决办法：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px dotted green;
}

.content {
  margin: 2em;
  border: 2px solid red;
  overflow: auto;
}

<div class="grid-container">
  <div class="content">
    <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
  <div class="content">
    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
  <div class="content">
    <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
</div>

编辑： 显然，word-break: break-word; 在 Firefox 中不起作用 - 谢谢 @Yaakov Ainspan。另一个提醒您应该在多个浏览器中测试您的代码。可以改用word-break: break-all;。

【讨论】：

太棒了。这两个建议都解决了我的问题，但我必须尝试一些细微的差异。非常感谢你！我提出问题的方式可能会使分词选项更正确，但实际上似乎溢出解决方案在实践中最适合我。

【解决方案2】：

@fen1x 的回答很接近，但并不完全。我对此进行了一些实验，发现word-break: break-all 有效，而break-word 无效。（溢出解决方案有点工作，但不是 OP 要求的）。

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 100%;
}

.content {
    margin: 2em;
    word-break: break-all;
}

<div class="grid-container">
        <div class="content">
            <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
        <div class="content">
            <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
        <div class="content">
            <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
    </div>

另外，该方案不需要应用于网格项内的单个元素，而是可以直接应用于该项。

【讨论】：

【解决方案3】：

试试：

grid-template-columns: 重复(3, minmax(0, 1fr));

【讨论】：