使用fr单位时网格列被拉伸

Question

我试图制作一个图片库，我希望图片占据容器的一半高度和一半宽度，所以我做了类似的事情：

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

div > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

＆＃13;

<div>
  <figure>
    <img src="http://lorempicsum.com/futurama/327/100/1">
  </figure>
  <figure>
    <img src="http://lorempicsum.com/futurama/427/200/2">
  </figure>
  <figure>
    <img src="http://lorempicsum.com/futurama/527/300/3">
  </figure>
  <figure>
    <img src="http://lorempicsum.com/futurama/627/200/4">
  </figure>
</div>

＆＃13;

＆＃13;

＆＃13;

现在我不明白为什么我的图像不高100px？ fr单位是否应该在figure s之间平均分配空间？为什么它的行为与我grid-template-rows: repeat(2, 100px);或grid-template-rows: repeat(2, 50%);时的行为方式相同？

修改

我偶然发现了this post所说的

  

fr单位填满了可用空间但是它从不小于行或列的内容

但这是否意味着我只是在这种情况下 使用fr单位？

Answer 1

我认为你需要div中的宽度

* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
width:200px;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

div > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div>
  <figure>
    <img src="http://lorempicsum.com/futurama/327/100/1">
  </figure>
  <figure>
    <img src="http://lorempicsum.com/futurama/427/200/2">
  </figure>
  <figure>
    <img src="http://lorempicsum.com/futurama/527/300/3">
  </figure>
  <figure>
    <img src="http://lorempicsum.com/futurama/627/200/4">
  </figure>
</div>