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>

网格画廊之间的第一行和第二行之间的空间

1 个答案: