WooCommerce商品分类网格移动端出现随机空白间隙问题求助

你遇到的间隙问题和模板未指定网格行无关，本质是移动端商品卡片采用浮动（float）布局导致的经典错位问题：

• 浮动元素布局时只会参照前一个同方向浮动元素的高度排版，当某行中某个商品卡片因标题多出一行高度高于其他卡片时，下一行的第一个浮动元素会被卡在上一行最高元素的右侧，自然就形成了空白间隙
• 其余归档页未出现问题是因为这些页面的商品标题刚好都统一为2行，所有卡片高度一致，没有触发浮动错位的条件

以下3种方案都可以解决问题，可按需选择：

方案1：替换为Grid布局（最稳定，推荐） #

直接放弃浮动布局，改用CSS Grid实现网格，彻底避免浮动错位问题，可将以下代码加入主题自定义CSS面板：

/* 适配WooCommerce默认商品列表类，若你的主题自定义了类名替换成对应类即可 */
ul.products {
  display: grid !important;
  /* 移动端设置为2列，可按需调整 */
  grid-template-columns: repeat(2, 1fr);
  /* 统一控制卡片横向、纵向间距 */
  gap: 15px;
}
ul.products li.product {
  /* 取消原有浮动设置 */
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

方案2：统一商品卡片高度（成本最低） #

强制限制商品标题最多显示2行，超出部分自动省略，保证所有卡片高度统一，不会触发错位：

.woocommerce-loop-product__title {
  display: -webkit-box;
  /* 限制最多2行 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

方案3：批量添加clear属性（兼容原有浮动逻辑） #

对应你之前测试的修复逻辑，不用手动给单个商品加属性，通过CSS选择器批量控制每行第一个元素清除浮动：

@media (max-width: 768px) {
  /* 移动端2列布局，每2个商品清除一次左侧浮动 */
  ul.products li.product:nth-child(2n+1) {
    clear: both;
  }
}

内容的提问来源于stack exchange，提问作者Kelvin Farrell