Parent height of css Grid container

[nikostzounakos]

Hello!

I am trying to make the parent of a grid container to fit the grid container in the height, without defining it.

For example I have this pen, that the #header background is black.
It is only visible if I set for example the #header the height: 100vh (it is commented it out now)

I am trying to make the #header to adjust it’s height according to it’s child elements height.

Is this something easy to do?

[PaulOB]

Hi,

You are floating your .container to the right of the header and floats are removed from the flow. Therefore the header actually contains no content at all which means there is no background.

If you contain the float the background will show.

e.g.

#header:after{
  content:"";
  display:table;
  clear:both;
}

However the black background still will not encompass the image on the right because you have set the grid row height to 310px and the image is around 450px tall and therefore pokes out of the section and is discounted from the flow of the document.

I don’t see why you need to float the container anyway as you are using css grid and get that position without floating. It also seems odd that you set a fixed height for the grid rows because you seldom want fixed heights on elements that hold fluid content.

I’m guessing your css just needs to be this:

body {
  font-size: 1.2rem;
  line-height: 2;
  font-family: "Monument-Regular", sans-serif;
  color: #D8D8D8;
margin:0;
padding:0;
}
.subtitle {
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 3.6rem;
}
#header {
  background: black;
}
.container {
  max-width:80%;
  margin:auto;
  min-height: 80vh;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows:auto auto;
}
.subtitle {
  margin-top: 30px;
}
.logo-area {
  justify-self: right;
}
.image-area {
  grid-column: 1/3;
}
.image-area img {
  object-fit: cover;/* makes no difference if height is auto*/
  width: 100%;
  height: auto;
}

Roughly

[nikostzounakos]

Yes these are true, it makes things more understandable.

I will make some changes based on it.

Thank you!!!