CSS网格等大小列

Question

我想创建3个div，每个div都包含1个p标签，并使用CSS网格在同一行上分配所有3个div的相等宽度。大多数来源都说我应该使用grid-template-columns来实现这一点。有些人建议选择1fr 1fr 1fr，有些人建议选择repeat(3, 1fr)，还有更多人建议选择repeat(3, auto)。结果是相同的。三个div最终在同一行上，但其宽度取决于其内容的宽度。是否有一种方法可以强制所有3个div具有相同的宽度，并在内容过宽时仅使用下一行？

The snippet should show the situation I'm in.

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

- Rins

Answer 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; 可以替代使用。

- fen1x

---

太棒了。两个建议都解决了我的问题，只是有一些微小的差异需要我去尝试。非常感谢！我提出问题的方式可能使得断词选项更正确，但实际上溢出解决方案在实践中似乎更适合我。 - Rins

Answer 2

请尝试:

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

- Giedrius nesvarbu

Answer 3

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

此解决方案不需要应用于网格项内的各个元素，而是可以直接应用于该项本身。

- yaakov