CSS div定位4个div（使用网格）

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>