Grid row height gets bigger than defined

Question

I've nested a grid inside another grid and defined the size of the columns and rows of the inside grid (#content) as 1fr.

But when I add the text, the columns display properly, but the row height becomes bigger and because of that the whole container itself becomes bigger.

I assumed that it is because the font height is bigger than 1fr, but the height of the row is even bigger, than the font size.

Why does the row height change?

P.S. Everything works correctly when I set the row size to auto, but I don't understand why does the 1fr doesn't work in this case and what defines the exact height of the row in this case.

Codepen: https://codepen.io/s4ek1389/pen/gqZvRZ

HTML:

<html>
  <body>
    <div id="container">
      <div id="content">
        <div id="label">Author</div>
      </div>
       <div id="image"></div>
    </div>
  </body>
</html>

CSS:

body {
  background-color: #A9E5BB;
  margin: 0;
}

#container {
  display: grid;
  grid-template-columns: repeat(50, minmax(2vw, auto));
  grid-template-rows: repeat(50, minmax(2vh, auto));
}

#content {
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  /* Please take a look at the line below. */
  grid-template-rows: repeat(50, auto);
   /* Please take a look at the line above. */
  grid-column: 11/41;
  grid-row: 8/44;
  background-color: #2D1E2F;
}

#image {
  display: grid;
  background-color: #F7B32B;
  grid-column: 13/23;
  grid-row: 4/48;
}

#label {
  color: white;
  grid-column-start:36;
  grid-row-start: 10;
}

Igor Schekotihin Igor Schekotihin · Accepted Answer · 2019-02-26T06:30:50

I found the problem: the <p> elements had a default margin. Everything works fine after overriding them.

Grid row height gets bigger than defined

1 Answers