我如何使用网格中的图像中的showin这样的设计

Question

这是我目前有网格箱的代码。

.service-box-container{
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    gap: 15px;
}

.service-box-container img{
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  height: 460px;
    border-radius: 20px;
}

<div class="service-box-container">

  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  <div class="service-box">
      <figure>
        <img src="https://via.placeholder.com/350" class="" alt="">
      </figure>
  </div>
  
  
</div>

设计我正在寻求吸收：

我想使用网格CSS上的每个偶数行和3个项目显示两个项目。这也适用于任何其他行。

目前，它在奇数甚至行上都显示出相同的样式。这是 https://jsfiddle.net/fk9y0uhd/3

Answer 1

使用网格行 - 启动和网格圈端属性，例如列以及网格元件启动和网格电池端，以制作此布局。这将帮助您
检查。或使用3列网格作为奇数和6列网格的evens。