Как предотвратить разрыв длинного абзаца в вашей CSS-сетке [области шаблона]

Question

Я пытаюсь собрать абсолютно простой макет, и похоже, что мне мешает тэг ap, который растягивает контейнер за пределы сетки, а не на ожидаемое поведение (перенос).

Вот некоторый базовый код:

HTML:

<div class="top-level-wrapper">
  <header>I am a header!</header>
  <main>
    <h3>Some page title</h3>
    <p>
      Some text.
    </p>
  </main>
  <footer>I am a footer!</footer>
</div>

CSS:

html, body {
  margin: 0 auto;
}

/* Layout stuff. */
header {grid-area: h;}
footer {grid-area: f;}
main {grid-area:m;}
.top-level-wrapper {
  display: grid;
  grid-template-areas:
    "h h h h h"
    ". m m m ."
    "f f f f f";
}

Насколько я понимаю, эта область шаблона сетки в основном говорит: "Есть 5равные дробные единицы на строку, и main будет занимать средние три во ВСЕХ раз.

Однако на самом деле происходит следующее: если этот «некоторый текст» удлиняется, шаблон просто ломается.

• Пример 1 - Ожидаемый вид: https://jsfiddle.net/r6j35vz3/1/
• Пример 2 - Сломан: https://jsfiddle.net/r6j35vz3/2/

Как настроить сетку так, чтобы она действовала правильно, независимо от того, какего содержимое может хотеть вести себя по умолчанию?

Answer 1

Вы используете grid-template-areas для построения своей сетки.Это выкладывает столбцы и строки.

Однако, без grid-template-columns, чтобы определить ширину каждого столбца, они по умолчанию будут auto (т.е.длина контента).Первый и последний столбцы во втором ряду не имеют содержимого, поэтому они просто сворачиваются.Затем три средних столбца занимают все пространство в строке.

Вам нужно использовать grid-template-columns, чтобы получить желаемое поведение.Если вы установите для каждого столбца значение 1fr, строка будет разделена на пять столбцов одинаковой ширины

html, body {
  margin: 0 auto;
}

/* Layout stuff. */
header {grid-area: h;}
footer {grid-area: f;}
main {grid-area:m;}
.top-level-wrapper {
  display: grid;
  grid-template-areas:
    "h h h h h"
    ". m m m ."
    "f f f f f";
    grid-template-columns: repeat(5, 1fr); /* NEW */
}

/* Cosmetics only - you can ignore what's below here. */
header, footer {
  background-color: darkblue;
  color: white;
}

main {
  border: 3px solid red;
  background-color: grey;
}

<div class="top-level-wrapper">
  <header>I am a header!</header>
  <main>
    <h3>Some page title</h3>
    <p>
      Some text. And some more, and more, and more, until this paragraph, which really ought to be wrapping, will instead lengthen the main section and break the template's contract.
    </p>
  </main>
  <footer>I am a footer!</footer>
</div>

Answer 2

Вам необходимо указать свойство grid-template-columns:

jsfiddle

html, body {
  margin: 0 auto;
}

/* Layout stuff. */
header {grid-area: h;}
footer {grid-area: f;}
main {grid-area:m;}
.top-level-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "h h h h h"
    ". m m m ."
    "f f f f f";
}

/* Cosmetics only - you can ignore what's below here. */
header, footer {
  background-color: darkblue;
  color: white;
}

main {
  border: 3px solid red;
  background-color: grey;
}

<div class="top-level-wrapper">
  <header>I am a header!</header>
  <main>
    <h3>Some page title</h3>
    <p>
      Some text. And some more, and more, and more, until this paragraph, which really ought to be wrapping, will instead lengthen the main section and break the template's contract.
    </p>
  </main>
  <footer>I am a footer!</footer>
</div>