CSS分区定位4个分区(使用网格)

Question

我有4个div块，其中有1个div中的信息。如何使它们更接近？在此处输入图像描述

这是代码

.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 15px;
grid-row-gap: 15px;
}

Answer 1

您必须使用grid-template-columns: repeat(3, auto);&place-content:center;你现在可以将差距更改为0

.list {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, 1fr);
grid-column-gap:10px;
grid-row-gap: 10px;
place-content:center;
}
.list>img {
width: 200px;
}

<div class="list">
<img src="https://images.unsplash.com/photo-1657299171054-e679f630a776?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw0MXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">
<img src="https://images.unsplash.com/photo-1657299142018-4f7f33aea18c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw1MXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">
<img src="https://images.unsplash.com/photo-1657299170237-2d4cd59b5156?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2MXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">
<img src="https://images.unsplash.com/photo-1657299170936-0531a116c87c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwyMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">
</div>