格列使用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>