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像素，但它是...？〜500px宽？这就是网格的工作原理吗？

在这种情况下，如何获得div.wrap来匹配孩子的宽度？这是上面的codepen链接： https://codesandbox.io/s/3ox029p2p-index.html中所有相关的标记/样式。

Answer 1

根据我对此问题的评论，您可以切换到内嵌网格（请注意，默认情况下，块级元素采用视口的宽度，如果内部元素超出此值（只是溢出），并使用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>

CSS网格容器不占用其子项的宽度

1 个答案: