网格样式：在填写空白

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