CSS 网格创建额外间隙

Question

我一直在创建一个简单的响应式 CSS 网格，但由于某种原因，当我将浏览器缩小时，它会在第一列和第二列之间创建一些额外的空间。 这是我的代码。

 .services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-template-rows: repeat(auto-fit, minmax(25rem, 1fr)); justify-items: center; text-align: center; grid-column-gap: 5rem; grid-row-gap: 5rem; }.services-container div { background-color: #D00000; height: 20rem; }

 <div class="services-container"> <div class="item-1"> <h1>Услуга 1</h1> <p>Мини описание на услугата</p> </div> <div class="item-2"> <h1>Услуга 2</h1> <p>Мини описание на услугата</p> </div> <div class="item-3"> <h1>Услуга 3</h1> <p>Мини описание на услугата</p> </div> <div class="item-4"> <h1>Услуга 4</h1> <p>Мини описание на услугата</p> </div> <div class="item-5"> <h1>Услуга 5</h1> <p>Мини описание на услугата</p> </div> <div class="item-6"> <h1>Услуга 5</h1> <p>Мини описание на услугата</p> </div> </div>

Answer 1

我最好的猜测是，您的一些额外空格的原因是网格模板列或行中的 minmax 值，因为当您更改浏览器大小时，minmax 会改变项目的大小，有时如果 min值几乎接近最大值的大小。

我尝试同时更改为20rem ：

grid-template-columns: repeat(auto-fit, minmax(20rem, 20rem));

而且屏幕太小就掉下来，缝隙没有变化

这取决于网格模板中 minmax 的大小

Answer 2

更改 - grid-template-rows: repeat(auto-fit, minmax(20rem, 1fr));

 .services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-template-rows: repeat(auto-fit, minmax(20rem, 1fr)); justify-items: center; text-align: center; grid-column-gap: 5rem; grid-row-gap: 5rem; }.services-container div { background-color: #D00000; height: 20rem; }

 <div class="services-container"> <div class="item-1"> <h1>Услуга 1</h1> <p>Мини описание на услугата</p> </div> <div class="item-2"> <h1>Услуга 2</h1> <p>Мини описание на услугата</p> </div> <div class="item-3"> <h1>Услуга 3</h1> <p>Мини описание на услугата</p> </div> <div class="item-4"> <h1>Услуга 4</h1> <p>Мини описание на услугата</p> </div> <div class="item-5"> <h1>Услуга 5</h1> <p>Мини описание на услугата</p> </div> <div class="item-6"> <h1>Услуга 5</h1> <p>Мини описание на услугата</p> </div> </div>