WordPress分类页产品横向排列如何调整为适配站点布局的网格视图？

以下方案针对多数外贸类建站架构适用，你可以根据自己的站点技术栈选择对应操作： #

方案1：通用自定义CSS修改（无需改动核心代码，适用于所有架构站点） #

操作步骤：

• 进入站点后台的自定义代码/自定义CSS配置入口，WordPress站点路径为 外观 > 自定义 > 额外CSS，Shopify等SaaS站点可在主题设置中找到自定义CSS板块
• 粘贴以下CSS代码，可根据你的站点实际布局调整参数：

/* 适配产品分类页网格布局 */
/* 替换下方选择器为你站点产品列表父容器的实际类名 */
.product-category .product-list-wrapper {
  display: grid !important;
  /* 自动适配列数，单个卡片最小宽度可根据需求调整 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  row-gap: 24px; /* 行间距 */
  column-gap: 16px; /* 列间距 */
  width: 100% !important;
  overflow-x: hidden !important; /* 禁用横向滚动 */
}

/* 清除原有横向布局的浮动/弹性盒规则 */
.product-category .product-list-wrapper .product-item {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* 移动端适配 */
@media screen and (max-width: 767px) {
  .product-category .product-list-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    row-gap: 16px;
    column-gap: 12px;
  }
}

注：如果上述代码不生效，可右键点击当前分类页的产品列表区域，选择「检查」获取包裹所有产品的父容器class名，替换代码中的.product-category .product-list-wrapper即可。

方案2：可视化页面构建器直接调整（适用于Elementor/Divi等构建器搭建的站点） #

操作步骤：

• 进入产品分类归档页的编辑界面
• 找到产品列表对应的模块配置项，在「布局」设置中直接选择网格模式
• 按需调整列数、间距参数，和站点其他页面的产品卡片参数保持一致即可实现全局适配
• 保存修改后清空缓存预览

验证调整效果注意事项 #

• 所有修改完成后，先清空站点缓存、CDN缓存和浏览器本地缓存，再刷新页面查看效果
• 分别在PC端、移动端预览，确认布局无溢出、卡片排版对齐正常

内容的提问来源于stack exchange，提问作者Nashon Chacha