網格樣式：在填寫空白

Question

創建4x4的方格：

​​3210

HTML & CSS代碼：https://codepen.io/ikenna-porter/pen/PKpyJB/?editors=1100

是否有可能（擺脫每行之間多餘的空白的比如：與鳥的圖像和美國國旗/導彈的圖像之間的巨大差距）。我希望每行都能自動填充上一行留下的空格，以便每行圖像都不完全對齊。

謝謝！

Answer 1

據我所知，網格造型使得行數與最高元素一樣大（但我還沒有使用過這個技巧）。你可以製作欄目並在那裏插入你的圖片。

https://codepen.io/Czeran/pen/MvpLOW?editors=1100

HTML

<div class="grid"> 
<div class="column"> 
    <img src="https://s2.postimg.org/9w8gabqzd/seuss_America_First.jpg"> 
    <img src="https://s2.postimg.org/4tvpta72x/charlieHebdoTrump.jpg"> 
</div> 
<div class="column"> 
    <img src="https://s2.postimg.org/si6mate8p/coke_Human_Rights.png"> 
    <img src="https://s2.postimg.org/fs6zbgvo9/white_House_Leaks.jpg"> 
</div> 
<div class="column"> 
    <img src="https://s2.postimg.org/tbj83fk9l/our_Mother_Europe.jpg"> 
    <img src="https://s2.postimg.org/62jlewz15/space_Militarization.jpg"> 
</div> 
<div class="column"> 
    <img src="https://s2.postimg.org/vhdixxnq1/pet_To_Suffragette.jpg"> 
    <img src="https://s2.postimg.org/wow23w389/seuss_Mental_Insecticide.jpg"> 
</div> 

CSS

.grid { 
width: 100%; 
} 

.column { 
    float: left; 
    width: 25%; 
} 

img { 
    max-width: 90%; 
}