CSS сетка столбцов одинакового размера

Question

Я пытаюсь создать 3 элемента div, каждый из которых содержит 1

-tag, и распределить все 3 в одной строке с одинаковой шириной с использованием CSS-сетки.

Большинство источников говорят, что я должен использовать grid-template-columns для достижения этой цели.Некоторые говорят, что нужно пойти на 1fr 1fr 1fr, некоторые говорят repeat(3, 1fr), а другие говорят repeat(3, auto).

Результат тот же.3 элемента заканчиваются на одной строке, но их ширина меняется в зависимости от ширины их содержимого.Есть ли способ заставить все 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

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

Ваша сетка в порядке - здесь проблема с контентом.

Вы можете попробовать 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; можно использовать вместо.