Question

创建4x4网格：

.grid div img {
    width: 100%;
    object-fit: contain;
}

.grid {
    width: 90%;
    margin: auto auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-start: auto;
    grid-gap:.7em;
}

HTML＆amp; CSS代码：https://codepen.io/ikenna-porter/pen/PKpyJB/?editors=1100

是否有可能摆脱每一行之间的额外空白区域（例如：图像与鸟类之间的巨大差距和带有美国国旗/导弹的图像）。我希望每行自动填充前一行留下的空格，这样每行图像都不完全对齐。

谢谢！

Answer 1

据我所知，网格样式使行与最高元素一样大（但我没有太多使用此tehnique）。您可以制作列，然后插入图像。

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

网格样式：填充空白区域

1 个答案: