Html 如何阻止网格项目拉伸

发布于11月08日

我有这个简单的网格:

.outGrid {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  width: 40px;
  height: 40px;
  background-color: grey;
}

<div class='outGrid'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

如您所见，我将网格间距定义为40px，但每个网格项目都会随着页面宽度的变化而水平拉伸.我希望项目不会伸展，只是简单地占据全部空间，所以垂直和水平间隙都是40px，形成了一个漂亮的3*3网格.如何实现这一目标？

推荐答案

使用auto代替1fr，并将内容对齐:

.outGrid {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(3, auto);
  place-content: start;
}

.item {
  width: 40px;
  height: 40px;
  background-color: grey;
}

<div class='outGrid'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>