Question

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

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

大多数消息人士说，我应该使用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作为解决方法：

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;。

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

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

Answer 3

尝试：

grid-template-columns：repeat（3，minmax（0，1fr））;

CSS网格大小相等的列

3 个答案: