如何创建此 css 网格

Question

I want to acheive this design any next category will automatically adjust to the previous div. Every category have not specific product but need to just after the previous product like we use float left or display-flex But don't want to create multiple css for responsive. Because it has more than 25 categories. `

 .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

If you want to use CSS grid, there no big difficulties simply check the documentation to understand the main CSS properties you need to add.
Also check this guide on CSS grid to undertand more and see examples.

Quick help

If I understand correctly you want 3 items max per row, to do that you will need to set:

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

The equivalent to flex-direction: row; is grid-auto-flow: row;

You will I presume also need a gap (spacing between items), something like that:

gap: 10px;

So a good starting point will be:

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

I leave you do the rest according to your needs.