如何在移动端将Woocommerce相关产品设置为2列（Blockify主题）

你之前添加display:flex实现了横向排列，但没解决宽度问题，核心是要同时处理容器的flex规则和子元素的宽度计算，还要抵消主题默认样式的影响。试试下面的CSS代码：

@media (max-width: 600px) {
    /* 覆盖原网格布局，启用flex */
    .wp-block-post-template-is-layout-grid {
        grid-template-columns: unset !important;
        display: flex;
        flex-wrap: wrap;
        gap: 1.2rem; /* 产品之间的间距，可根据需求调整 */
        padding: 0 0.6rem; /* 避免产品贴到屏幕边缘 */
    }

    /* 设置每个产品项占50%宽度，同时处理间距 */
    .wp-block-post-template-is-layout-grid > .wp-block-post {
        width: calc(50% - 1.2rem);
        box-sizing: border-box; /* 确保内边距、边框不超出宽度 */
        margin: 0;
    }
}

关键说明： #

• 用grid-template-columns: unset !important彻底取消原有的grid布局规则，避免和flex冲突；
• flex-wrap: wrap保证产品超出一行时自动换行，形成2列；
• calc(50% - 1.2rem)是核心：50%宽度减去容器的gap值，确保两个产品加间距刚好填满一行，不会溢出；
• box-sizing: border-box防止产品的内边距、边框额外占用宽度，导致布局错乱。

如果主题对产品项还有额外的padding或margin，可以根据实际情况微调数值，比如调整gap或width的计算值。

内容的提问来源于stack exchange，提问作者Saskia SEO