css - 网格画廊之间的第一条和第二条线之间的空间

Question

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

} 网格图像

你能告诉我第一行和第二行之间的间距是多少吗？其他线路完美。我也宣布*{ margin: 0; padding: 0;} 请帮助。

标签： csscss-grid

Answer 1

您的 css 正在创建每个 250 长的网格项，并且该 div 中的常量高度不高，因此它采用 IE 的全高 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>