Как сохранить контент в центре CSS Grid Layout?

Question

Используя CSS Grid Layout, я создаю сайт, макет которого немного меняется в зависимости от размера экрана.

Здесь, чтобы сохранить содержимое (розовая область) в макете CSS Grid Layout, я выполнил следующий стиль.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  color: #fff;
}

.bg {
  background-color: #6c757d;
}

footer {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
  grid-template-rows: repeat(3, auto);
}

h1,
dl {
  grid-column: 2;
  background-color: pink;
}

p.h6 {
  grid-row: 3;
  grid-column: 3;
  overflow-wrap: break-word;
}

@media (max-width: 800px) {
  p.h6 {
    grid-column: 2;
  }
}

body>p {
  text-align: center;
}

<footer class="bg text">
  <h1>
    heading
  </h1>
  <dl class="h6">
    <dt>word1</dt>
    <dd>desc1</dd>
    <dt>word2</dt>
    <dd>desc2</dd>
  </dl>
  <p class="h6">COPYRIGHT(C)loooooooooooooooooooooooooongtext</p>
</footer>
<p>&#8593;<br>true center</p>

Кажется, это хорошо работает, когда ширина широкая, , но когда ширина меньше, розовая область отклоняется от "истинного центра" .

Это также показывает, что minmax (20%, 1fr) не работает хорошо.

Как я могу держать эту розовую область по центру? Кроме того, есть ли лучший способ, чем тот, который я думал выше? (С помощью CSS Grid Layout)

Answer 1

Посмотрите на это правило:

p.h6 { grid-column: 3; }

Когда ширина области просмотра превышает 800 пикселей, текст в элементе p.h6, то есть этот: "COPYRIGHT (C)"«оооооооооооооооооооооооо»

занимает крайний правый столбец, столбец 3 сетки. Розовая рамка в центре может быть очень маленькой.Это потому, что вы установили grid-template-columns для элемента нижнего колонтитула следующим образом:

grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);

Другими словами, столбцы, окружающие розовую рамку, должны быть максимально большими (1fr)в то время как розовое поле должно быть как можно меньше (авто или ширина текста внутри).

Теперь, когда область просмотра на меньше , чем 800px, текст об авторском праве перемещается в2-й или средний столбец:

@media (max-width: 800px) { p.h6 { grid-column: 2; } }

Это означает, что ширина auto этого столбца будет равна всей ширине "loooooooongtext".Вот почему он переполняет область просмотра, когда вы слишком уменьшаете его.

Это можно исправить, добавив два значения свойства к прямым дочерним элементам нижнего колонтитула:

footer > *{ overflow-wrap: break-word; overflow: hidden; }

Оба идут в медиа-запросе max-width: 800px.Демо:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  color: #fff;
}

.bg {
  background-color: #6c757d;
}

footer {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr);
  grid-template-rows: repeat(3, auto);
}

h1,
dl {
  grid-column: 2;
  background-color: pink;
}

p.h6 {
  grid-row: 3;
  grid-column: 3;
  overflow-wrap: break-word;
}

@media (max-width: 800px) {
  p.h6 {
    grid-column: 2;
  }
  
  footer{
    grid-template-columns: 1fr 1fr 1fr;
  }
  footer > *{
    overflow-wrap: break-word;
    overflow: hidden;
  }
}

body>p {
  text-align: center;
}

<footer class="bg text">
  <h1>
    heading
  </h1>
  <dl class="h6">
    <dt>word1</dt>
    <dd>desc1</dd>
    <dt>word2</dt>
    <dd>desc2</dd>
  </dl>
  <p class="h6">COPYRIGHT(C)loooooooooooooooooooooooooongtext</p>
</footer>
<p>&#8593;<br>true center</p>

Answer 2

Вы можете использовать grid-template-columns: 1fr auto 1fr для центрирования среднего столбца.Теперь добавьте min-width: 0 в p.h6, чтобы переопределить значения по умолчанию min-width: auto из элементов сетки , чтобы позволить ему уменьшаться в размере предыдущего содержимого (значение overflow , отличное от видимого, также работает) - это позволяет overflow-wrap: break-word вступить в силу.Смотрите демо ниже:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  color: #fff;
}

.bg {
  background-color: #6c757d;
}

footer {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* changed */
  /*grid-template-rows: repeat(3, auto); <-- redundant */
}

h1,
dl {
  grid-column: 2;
  background-color: pink;
}

p.h6 {
  grid-row: 3;
  grid-column: 3;
  overflow-wrap: break-word;
  min-width: 0; /* added */
}

@media (max-width: 800px) {
  p.h6 {
    grid-column: 2;
  }
}

body>p {
  text-align: center;
}

<footer class="bg text">
  <h1>
    heading
  </h1>
  <dl class="h6">
    <dt>word1</dt>
    <dd>desc1</dd>
    <dt>word2</dt>
    <dd>desc2</dd>
  </dl>
  <p class="h6">COPYRIGHT(C)loooooooooooooooooooooooooongtext</p>
</footer>
<p>&#8593;<br>true center</p>