CODEWITHSUNDEEP
htmlcsscss-grid
Stephen2
Stephen2

Reputation: 57

CSS Grid container not taking the width of its children

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.

Upvotes: 3

Views: 1862

Answers (1)

kukkuz
kukkuz

Reputation: 42352

As per my comments to this question, you can switch to inline-grid (note that block-level elements take the width of the viewport by default and if the inner elements exceed this value it just overflows) and use min-width: 100vw to the wrap element - see demo below:

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>

Upvotes: 4

Related Questions