html - 如何连续显示 3 列，其余列将使用显示网格显示在中心？

Question

我的页面上有图像（将来会增加），我正在使用display: grid. 现在我的问题是，我必须连续显示 3 列，其余列将显示网格的中心。

我说的display:grid不是display:flex

我得到的输出像

我的期望输出是这个

.gridWrap {
  width: 1024px;
  margin: auto;
}

.gridWrap ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
  justify-content: center;
  list-style: none;
  padding-left: 0;
}

.gridWrap ul img {
  width: 100%;
}

<div class="gridWrap">
  <ul>
    <li>
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li>
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li>
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li>
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li>
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
  </ul>
</div>

标签： htmlcssgrid

Answer 1

我推荐你使用 bootstrap 所以你可以使用 Bootstrap Container 轻松地完成这些工作。但是我有一个使用grid-column-startand的解决方案grid-column-end。

.gridWrap {
  width: 1024px;
  margin: auto;
}

.gridWrap ul {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-gap: 25px;
  list-style: none;
  padding-left: 0;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.box2 {
  grid-column-start: 3;
  grid-column-end: 5;
}

.box3 {
  grid-column-start: 5;
  grid-column-end: 7;
}

.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.box5 {
  grid-column-start: 4;
  grid-column-end: 6;
}

.gridWrap ul img {
  width: 100%;
}

<div class="gridWrap">
  <ul>
    <li class="box1">
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li class="box2">
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li class="box3">
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li class="box4">
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li class="box5">
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
  </ul>
</div>

希望这对你有用..