CSS 网格大小相等的列

Question

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

标签，并使用 CSS 网格将所有 3 个分布在同一行且宽度相等。

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

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

该片段应该显示我所处的情况。

.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>

Answer 1

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

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

分词解决方案:

.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>

溢出解决方案:

.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; 可以代替。