CSS网格容器没有采用其子元素的宽度

Question

使用CSS网格布局，我期望网格容器（父元素）的宽度取决于其子元素的最大宽度 - 就像

元素从其内容中获取宽度一样。"最初的回答"

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 与其子元素匹配宽度？这里是上述问题的 Codepen 链接：https://codesandbox.io/s/3ox029p2p - 所有相关的标记/样式都在 index.html 中。请注意保留 HTML 标签。

- Stephen2

---

切换到 inline-grid（请注意 块级元素 将占据浏览器视口的宽度），并在 wrap 元素中添加 min-width: 100vw。参见 https://jsfiddle.net/L1vd8afh/。如果需要，我可以将此内容转换为答案，同时还会附上代码片段。 - kukkuz

@kukkuz 你太棒了。inline-grid 赢了！ - Stephen2

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>

- kukkuz