子比 (Zibll) 主题文章卡片布局优化 – 一行显示 5 个教程

子比主题默认的文章卡片布局多为一行 4 个，对于宽屏设备来说空间利用率较低。本文分享的 CSS 代码可精准调整文章卡片布局，实现宽屏一行 5 个、中屏一行 4 个、小屏一行 2 个的自适应效果，既提升页面内容密度，又保证不同设备的显示美观度。

一、效果说明

✅ 宽屏（≥700px）：文章卡片自动排列为一行 5 个，充分利用宽屏空间

✅ 中屏（500-699px）：自适应切换为一行 4 个，兼顾显示效果与可读性

✅ 小屏（≤499px）：恢复一行 2 个默认布局，适配手机等移动设备

✅ 保留卡片原有样式、hover 动效、文字排版，仅调整布局宽度

✅ 统一卡片间距，避免布局错乱，整体视觉更规整

二、安装步骤

1. 登录 WordPress 后台，进入「Zibll 子比主题」设置面板
2. 选择左侧菜单「全局 & 功能」→「自定义代码」
3. 找到「自定义 css 样式」输入框，将下方完整代码粘贴到其中
4. 滚动到页面底部，点击「保存设置」按钮
5. 清空网站缓存，刷新页面即可生效

三、完整优化代码

四、自定义调整技巧

1. 修改一行显示数量

如需调整卡片数量，只需修改宽度计算公式（核心逻辑：100% ÷ 数量 – 间距补偿值）：

/* 一行3个（恢复默认） */
width: calc(33.333% - 16px);

/* 一行6个（更紧凑） */
width: calc(16.666% - 16px);

2. 调整卡片间距

若觉得卡片间距过宽 / 过窄，同步修改以下两处数值（保持一致）：

/* 增大间距示例（左右10px，上下20px） */
margin: 0 10px 20px; /* 卡片间距 */
width: calc(20% - 20px); /* 间距补偿值=左右间距×2 */
.posts-items.card-list {
    margin: 0 -10px; /* 抵消卡片左右间距，与上面的10px对应 */
}

3. 调整适配屏幕尺寸

修改@media后的像素值，可自定义不同布局的触发条件：

/* 宽屏触发条件改为800px（屏幕≥800px才显示一行5个） */
@media (min-width: 800px) { ... }