格列使用FR单位

Question

我试图做一个图片库时捉襟见肘，而我需要的图片采取一半的高度，并在容器内可用宽度的一半，所以我做了这样的事情：

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

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

现在我不明白的是，为什么我的图片不是100px的高呢？ fr单位是不是应该在我的figure之间平均分配空间？为什么它的行为方式与我的做法相同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>