Question

我已经在另一个网格内嵌套了一个网格，并将内部网格（#content）的列和行的大小定义为1fr。

但是，当我添加文本时，列会正确显示，但是行高会变大，因此整个容器本身会变大。

我认为这是因为字体高度大于1fr，但是行的高度甚至大于字体大小。

为什么行高会改变？

P.S。当我将行大小设置为auto时，一切正常，但是我不明白为什么1fr在这种情况下不起作用，以及在这种情况下定义行的确切高度的原因。

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;
}

Answer 1

我发现了问题：<p>元素具有默认边距。覆盖它们后一切正常。

网格行高度大于定义的高度

1 个答案: