网格库之间的第一行和第二行之间的空间

Question

.gallery{
display: grid;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
grid-template-rows: repeat( auto-fit, minmax(250px, 1fr) );

}grid image

您能告诉我第一行和第二行之间的距离是多少吗？其他线路完美。我也宣告了

*{
    margin: 0;
    padding: 0;}

请帮助。

Answer 1

您的CSS正在创建每个长250的网格项目，并且该div中的常数不是那么高，所以它的整个高度即250px，检查一下https://gridbyexample.com/examples/example28/

因此只需根据行中的内容使行自动行

.gallery{
display: grid;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
grid-template-rows: auto;
}

<div class="gallery">
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
</div>