Контейнер CSS Grid не принимает ширину своих дочерних элементов

Question

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

body {
  min-width: 360px;
  margin: 0;
  background: red;
}

.wrap {
  display: grid;
  grid-template-areas: "header" "content" "footer";
  grid-template-columns: minmax(1200px, 100%);
  grid-template-rows: auto 1fr auto;
  background: green;
}

header {
  grid-area: header;
}

main {
  grid-area: content;
  background: orange;
}

footer {
  grid-area: footer;
}

<div class="wrap">
  <header>head</header>
  <main>content</main>
  <footer>footer</footer>
</div>

Но, похоже, я устарел в этом.Я ожидал, что div.wrap будет 1200 пикселей, как и все дети, но вместо этого это ...?~ 500 пикселей в ширину?Это как работает Grid?

Как я могу получить div.wrap для соответствия ширине дочерних элементов в этом случае?Вот ссылка для кодепа выше: https://codesandbox.io/s/3ox029p2p - вся соответствующая разметка / стиль в index.html.

Answer 1

Согласно моим комментариям к этому вопросу, вы можете переключиться на inline-grid (обратите внимание, что элементы уровня блока принимают ширину области просмотра по умолчанию и, если внутренние элементы превышать это значение, оно просто переполняется ) и использовать min-width: 100vw для элемента wrap - см. демонстрацию ниже:

body {
  min-width: 360px;
  margin: 0;
  background: red;
}

.wrap {
  display: inline-grid; /* changed */
  min-width: 100vw; /* added */
  grid-template-areas: "header" "content" "footer";
  grid-template-columns: minmax(1200px, 100%);
  grid-template-rows: auto 1fr auto;
  background: green;
}

header {
  grid-area: header;
}

main {
  grid-area: content;
  background: orange;
}

footer {
  grid-area: footer;
}

<div class="wrap">
  <header>head</header>
  <main>content</main>
  <footer>footer</footer>
</div>