CSS Grid не переносит детей при настройке grid-row

Question

CODEPEN

Справочная информация:

Я экспериментирую с Grid CSS и пытаюсь добраться до этого макета, который в настоящее время реализован в масштабе

Ожидаемая схема размещения

Проблема: На рабочем столе заголовок элемента должен иметь ширину 8 столбцов, и если я не добавлю строки сетки в element-header и element, то <div class="element">1</div> заполнит следующие значения element-header. Теперь, если я добавлю grid-rows, мой element больше не будет переноситься.

Текущий макет (проблема)

Вопрос Как я могу исправить сетку, чтобы она соответствовала скриншоту "ожидаемый макет" выше? т. е. .element обернется и начнется во второй строке сетки

Код:

HTML:

<section class="section">
  <div class="container">
    <div class="samba-grid">
      <div class="element-header"><h1>I am a lot of header text that only goes 8 columsn wide</h1></div>
      <div class="element">1</div>
      <div class="element">2</div>
      <div class="element">3</div>
      <div class="element">4</div>     
    </div>
  </div>
</section>

CSS:

.section {
  width: 100%;
  display: block;
  background: red;
  box-sizing: border-box;
  padding: 40px 24px;

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    background: orange;
    padding: 56px 48px;
  }

  @media screen and (min-width: 1140px) {
    padding: 64px 48px;
    background: green;
  }
}

.container {
  margin: 0 auto;
  background: rgba(244,244,244, .25);
  max-width: 599px;

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    max-width: 1039px;
    background: rgba(244,244,244, .25);
  }

  @media screen and (min-width: 1140px) {
    max-width: 1032px;
    background: rgba(244,244,244, .25);
  }
}

.samba-grid {
  display: grid;
  background: inherit;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 'auto auto';
  grid-gap: 24px;

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 48px;
  }

  @media screen and (min-width: 1140px) {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 48px;
  }
}

h1 {
  font-size: 52px;
}
.element-header {
  grid-row: 1;
  grid-column: span 8; // SET THIS TO "span 12" TO SEE EXPECTED BEHAVIOR
}

.element {
  display: grid; // important to do this.
  background: rgba(0,0,0,.3);
  grid-column: span 3;
  grid-row: 2; // REMOVE THIS TO SEE EXPECTED BEHAVIOR

  @media screen and (min-width: 600px) and (max-width: 1139px) {
    grid-column: span 3;
  }

  @media screen and (min-width: 1140px) {
    grid-column: span 4;
  }
}

Answer 1

Вы можете сделать так, чтобы текст занимал всю строку, а затем уменьшал ее ширину, чтобы она занимала только необходимую ширину. Таким образом, вы заблокируете 1-ю строку, и ни один элемент не сможет туда попасть.

Вот упрощенный пример:

.samba-grid {
  display: grid;
  background: inherit;
  width: 100%;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 24px;
  border:1px solid;
}

.element-header {
  grid-row: 1;
  grid-column: 1/-1;
}
.element-header > h1 {
  /*we take 8 colmuns (without gaps) + 7 gaps*/
  width:calc(8*(100% - 11*24px)/12 + 7*24px);
  background:red;
  margin:0;
}
.samba-grid > span {
  height:50px;
  grid-column: span 2;
  background:green;
}

<div class="samba-grid">
  <div class="element-header">
    <h1>I am a lot of header text that only goes 8 columsn wide</h1>
  </div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Чтобы сделать его более динамичным и простым в обращении, вы можете рассмотреть CSS-переменные:

:root {
  --grid:12;
  --gap:24px;
}

.samba-grid {
  display: grid;
  background: inherit;
  width: 100%;
  grid-template-columns: repeat(var(--grid), 1fr);
  grid-gap: var(--gap);
  border:1px solid;
}

.element-header {
  grid-row: 1;
  grid-column: 1/-1;
  --grid-column:8; /*simply adjust this value to control the column*/
}
.element-header > h1 {
  width:calc(var(--grid-column)*(100% - (var(--grid) - 1)*var(--gap))/var(--grid) + calc(var(--grid-column) - 1)*var(--gap));
  background:red;
  margin:0;
}
.samba-grid > span {
  height:50px;
  grid-column: span 2;
  background:green;
}

<div class="samba-grid">
  <div class="element-header">
    <h1>I am a lot of header text that only goes 8 columsn wide</h1>
  </div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Еще одна идея - рассмотреть скрытый элемент, который займет оставшееся место в первой строке:

.samba-grid {
  display: grid;
  background: inherit;
  width: 100%;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 24px;
  border:1px solid;
}

.element-header {
  grid-row: 1;
  grid-column: span 8;
  background:red;
  order:-2;
}

.samba-grid:before {
 content:"";
 order:-1;
 grid-column: span 4;
 background:blue;
 height:2px;
}

.samba-grid > span {
  height:50px;
  grid-column: span 2;
  background:green;
}

<div class="samba-grid">
  <div class="element-header">
    <h1>I am a lot of header text that only goes 8 columsn wide</h1>
  </div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

---

Как примечание, установка grid-row: 2 не означает начинать со второго ряда , но означает находиться во втором ряду , который создает проблему.

Answer 2

Я приказываю .element-header всегда охватывать максимальное количество доступных столбцов. Для h1 я добавил правило в больший запрос @media, которое поддерживает его правильное масштабирование (8 из 12 столбцов). Кроме того, я прокомментировал .grid-row: 2.

.element-header {
  grid-column-start: 1;
  grid-column-end: -1;
}

h1 {
  …  
  @media screen and (min-width: 1140px) {
    width: calc(80% / 120 * 100); /* 8 of 12 columns */
 }

Демонстрация (с использованием скомпилированного CSS)

.section {
  width: 100%;
  display: block;
  background: red;
  box-sizing: border-box;
  padding: 40px 24px;
}
@media screen and (min-width: 600px) and (max-width: 1139px) {
  .section {
    background: orange;
    padding: 56px 48px;
  }
}
@media screen and (min-width: 1140px) {
  .section {
    padding: 64px 48px;
    background: green;
  }
}

.container {
  margin: 0 auto;
  background: rgba(244, 244, 244, 0.25);
  max-width: 599px;
}
@media screen and (min-width: 600px) and (max-width: 1139px) {
  .container {
    max-width: 1039px;
    background: rgba(244, 244, 244, 0.25);
  }
}
@media screen and (min-width: 1140px) {
  .container {
    max-width: 1032px;
    background: rgba(244, 244, 244, 0.25);
  }
}

.samba-grid {
  display: grid;
  background: inherit;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 'auto auto';
  grid-gap: 24px;
}
@media screen and (min-width: 600px) and (max-width: 1139px) {
  .samba-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 48px;
  }
}
@media screen and (min-width: 1140px) {
  .samba-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 48px;
  }
}

h1 {
  font-size: 52px;
}
@media screen and (min-width: 1140px) {
  h1 {
    width: calc(80% / 120 * 100);
  }
}

.element-header {
  grid-row: 1;
  grid-column-start: 1;
  grid-column-end: -1;
}

.element {
  display: grid;
  background: rgba(0, 0, 0, 0.3);
  grid-column: span 3;
}
@media screen and (min-width: 600px) and (max-width: 1139px) {
  .element {
    grid-column: span 3;
  }
}
@media screen and (min-width: 1140px) {
  .element {
    grid-column: span 4;
  }
}

.element img {
  width: 100%;
}

<section class="section">
  <div class="container">
    <div class="samba-grid">
      <div class="element-header"><h1>I am a lot of header text that only goes 8 columns wide</h1></div>
      <div class="element"><img src="https://placebear.com/160/90" alt=""></div>
      <div class="element"><img src="https://placebear.com/160/90" alt=""></div>
      <div class="element"><img src="https://placebear.com/160/90" alt=""></div>
      <div class="element"><img src="https://placebear.com/160/90" alt=""></div>     
    </div>
  </div>
</section>

CodePen demo

Answer 3

Извлеките заголовок из сетки контейнера. Сделайте его отдельным элементом уровня блока.

Ниже разместите контейнер сетки только с изображениями.

Answer 4

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

HTML

<div class="element-header"><h1>I am a lot of header text that only goes 8 columsn wide</h1></div>
<div class='filler'></div>
<div class="element"><img src="https://placebear.com/160/90" alt=""></div>

CSS

.filler {
  display: none;

  @media screen and (min-width: 1140px) {
    grid-column: 9 / span 4;
    display: initial;
  }
}

Таким образом, выесть кое-что, чтобы поместить это место, и алгоритм автоматического размещения не использует это.

Вы можете просто скрыть, если на меньших разрешениях.