如何创建这个 CSS 网格

Question

我想实现这个设计，任何下一个类别都会自动调整到上一个 div。每个类别都没有特定的产品，但需要像我们使用 float left 或 display-flex 一样在前一个产品之后，但不想创建多个 css 来响应。因为它有超过25个类别。 `

.offerpage .product-box {
    margin: 0 5px;
}
.categoryProductsWrap{
  width: 100%;
}
.product-img{
  width: 100%;
}
.categoryProductsWrap .categoryProducts { 
    display: flex; 
    flex-wrap: wrap; 
    width: 100%;
} 
.categoryProductsWrap .categoryProducts .product-box {
    margin-bottom: 10px;
    float: left;
}
.offerpage .categoryName {
    color: #161719;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0.5em;
    border-bottom: solid 1px #dddddd;
    padding-bottom: 0.125em;
}
.img-box{
  position: relative;
    padding-top: 124%;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.product-box .product-img{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
.txt-content {
    overflow: hidden;
    position: relative;
}
.img-box{
    position: relative;
    padding-top: 124%;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.offerpage{
  display: flex;
  flex-wrap: wrap;
}
.categoryProductsWrap .categoryProducts .product-box{
  width: 33.333%
}
@media (min-width: 1200px){
  .categoryProductsWrap.cooling_fan {
      width: 50%;
  }
   .categoryProductsWrap.accessories {
      width: 50%;
  }
}

@media (min-width: 1440px){
  .categoryProductsWrap.accessories .categoryProducts .product-box, 
  .categoryProductsWrap.cooling_fan .categoryProducts .product-box {
      width: calc(50% - 10px);
  }
}

<div class="offerpage">
    <div class="categoryProductsWrap accessories">
        <div class="categoryName">Accessories</div>
        <div class="categoryProducts clearfix offerzone-slider products-wrapper">
                <div class="product-box">
                      <div class="product-inner-box">
                          <div class="txt-content">
                              <div class="img-box">
                                  <a href="#" class="product-thumbnail">
                                      <img class="product-img img-responsive" src="https://picsum.photos/400">
                                  </a>
                              </div>
                          </div>
                      </div>
                </div>
                <div class="product-box">
                      <div class="product-inner-box">
                          <div class="txt-content">
                              <div class="img-box">
                                  <a href="#" class="product-thumbnail">
                                      <img class="product-img img-responsive" src="https://picsum.photos/400">
                                  </a>
                              </div>
                          </div>
                      </div>
                  </div>
            </div>
    </div>
    <div class="categoryProductsWrap cooling_fan">
          <div class="categoryName">Cooling Fan</div>
          <div class="categoryProducts clearfix offerzone-slider products-wrapper">
                <div class="product-box">
                      <div class="product-inner-box">
                          <div class="txt-content">
                              <div class="img-box">
                                  <a href="#" class="product-thumbnail">
                                      <img class="product-img img-responsive" src="https://picsum.photos/400">
                                  </a>
                              </div>
                          </div>
                      </div>
                </div>
                <div class="product-box">
                      <div class="product-inner-box">
                          <div class="txt-content">
                              <div class="img-box">
                                  <a href="#" class="product-thumbnail">
                                      <img class="product-img img-responsive" src="https://picsum.photos/400">
                                  </a>
                              </div>
                          </div>
                      </div>
                  </div>
            </div>
      </div>
    <div class="categoryProductsWrap asus">
          <div class="categoryName">Asus</div>
          <div class="categoryProducts clearfix offerzone-slider products-wrapper">
                <div class="product-box">
                      <div class="product-inner-box">
                          <div class="txt-content">
                              <div class="img-box">
                                  <a href="#" class="product-thumbnail">
                                      <img class="product-img img-responsive" src="https://picsum.photos/400">
                                  </a>
                              </div>
                          </div>
                      </div>
                </div>
            </div>
      </div>
    <div class="categoryProductsWrap audio">
              <div class="categoryName">Audio Device</div>
              <div class="categoryProducts clearfix offerzone-slider products-wrapper">
                    <div class="product-box">
                          <div class="product-inner-box">
                              <div class="txt-content">
                                  <div class="img-box">
                                      <a href="#" class="product-thumbnail">
                                          <img class="product-img img-responsive" src="https://picsum.photos/400">
                                      </a>
                                  </div>
                              </div>
                          </div>
                    </div>
                 <div class="product-box">
                          <div class="product-inner-box">
                              <div class="txt-content">
                                  <div class="img-box">
                                      <a href="#" class="product-thumbnail">
                                          <img class="product-img img-responsive" src="https://picsum.photos/400">
                                      </a>
                                  </div>
                              </div>
                          </div>
                    </div>
                </div>
          </div>
</div>

`

Answer 1

如果您想使用 CSS 网格，没有什么大的困难，只需查看 the documentation 即可了解您需要添加的主要 CSS 属性。
另请查看this guide on CSS grid 以了解更多信息并查看示例。

快速帮助

如果我理解正确，您希望每行最多 3 个项目，为此您需要设置：

grid-template-columns: repeat(3, 1fr);

等价于flex-direction: row;的是grid-auto-flow: row;

我想你也需要一个间隙（项目之间的间距），就像这样：

gap: 10px;

所以一个好的起点是：

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
gap: 10px;

我让你根据你的需要做剩下的事情。