CSS Grid container does not taking the width of its children

Ask a question
0

Using CSS grid, I expected the grid container (parent) to take it’s width from the maximum of its children widths - the way a gets it’s width from the content inside it.

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>

But it looks like I might be out of date on this. I expected the div.wrap to be 1200px, like all the children, but instead it’s… ? ~500px wide? Is this just how Grid works?

How can I get div.wrap to match the width of the children in this instance? Here is codepen link for above: https://codesandbox.io/s/3ox029p2p - all relevant markup/style in index.html.

Coin iconoffer bounty
add comment

0 Answer

Your Answer