如何实现自动衔接的产品分类CSS Grid布局：无需多套响应式CSS

Got it, let's fix this so your products flow continuously across categories without writing dozens of media queries for each category. The main issue with your current setup is that each category has its own flex container—so products are trapped within their category's wrapper and can't fill space left by previous categories. Here's the clean, scalable solution:

Step 1: Simplify the HTML Structure #

We'll ditch the nested category containers and place category titles directly alongside product boxes in the main .offerpage container. This lets the flexbox layout handle the continuous product flow naturally:

<div class="offerpage">
  <!-- Category Title (full-width separator) -->
  <div class="categoryName">Accessories</div>
  <!-- Products for this category -->
  <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>

  <!-- Next Category -->
  <div class="categoryName">Cooling Fan</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 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>

  <!-- Repeat for all remaining categories -->
  <div class="categoryName">Asus</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 class="categoryName">Audio Device</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 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>

Step 2: Update the CSS #

We'll make .offerpage the main flex container, set category titles to take full width (so they force a line break between categories), and define responsive product widths that apply to all products—no per-category rules needed:

/* Main flex container for all products and category titles */
.offerpage {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 10px 5px; /* Replaces margins for cleaner, consistent spacing */
}

/* Category title: full width to separate categories cleanly */
.offerpage .categoryName {
  flex-basis: 100%; /* Forces the title to occupy an entire row */
  color: #161719;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 0.5em;
  border-bottom: solid 1px #dddddd;
  padding-bottom: 0.125em;
}

/* Product box base styles */
.offerpage .product-box {
  flex: 1 1 33.333%; /* Flexible width: 3 products per row by default */
  min-width: 200px; /* Prevents boxes from shrinking too small on mobile */
}

.product-inner-box {
  height: 100%;
}

.txt-content {
  overflow: hidden;
  position: relative;
}

.img-box {
  position: relative;
  padding-top: 124%; /* Maintains consistent image aspect ratio */
  width: 100%;
}

.product-box .product-img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures images fit the box without distortion */
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Responsive adjustments (applies to ALL products) */
@media (min-width: 1200px) {
  .offerpage .product-box {
    flex: 1 1 25%; /* 4 products per row on larger screens */
  }
}

@media (min-width: 1440px) {
  .offerpage .product-box {
    flex: 1 1 calc(50% - 5px); /* 2 products per row on extra-large screens */
  }
}

Key Benefits: #

• Continuous product flow: Products now automatically fill empty space from previous categories, just like a single flex or float layout.
• Zero per-category CSS: You don't need to write media queries for 25+ categories—all products use the same responsive rules.
• Cleaner spacing: Using gap instead of margins avoids layout bugs with wrapped items.
• Mobile-friendly: The min-width on product boxes ensures they stay usable on small screens.

内容的提问来源于stack exchange，提问作者Krishan Kumar