如何修改CSS将现有3列网格布局调整为4列网格布局

4列布局适配修改方案 #

你原有的3列布局逻辑是通过nth-of-type选择器选中每行首个元素，添加clear: both强制换行，避免元素高度不一致导致的布局错位，适配4列只需按以下逻辑修改：

第一步：调整列宽类名（必要前提）

你现有代码里用的sp-col-4是12栅格系统下占4份宽度的类，单元素宽度为33.33%，3个刚好撑满一行。要做4列布局，首先要把所有列元素的类从sp-col-4替换为sp-col-3，单元素宽度变为25%，4个刚好撑满一行。

第二步：修改CSS清浮动规则

把原有代码里所有3n的匹配规则替换为4n，匹配每4个元素为一行的逻辑，修改后完整代码如下：

/* 普通网格布局：选中第1、5、9...个元素清浮动，作为每行第一个元素 */
.post-layout.grid .sp-col-3:nth-of-type(4n+1){
  clear:both;
}
.post-layout.grid .post-meta .sp-col-3:nth-of-type(4n+1) {
  clear:none;
}
/* 全宽网格布局：按原有逻辑调整偏移量，选中第2、6、10...个元素清浮动 */
.post-layout.full-grid .sp-col-3:nth-of-type(4n+2){
  clear:both;
}
.post-layout.full-grid .post-meta .sp-col-3:nth-of-type(4n+2){
  clear:none;
}

可选优化方案

如果不需要兼容太老的浏览器，可以直接用CSS Grid实现布局，不用写复杂的清浮动规则，父元素添加以下样式即可：

.post-layout.grid, .post-layout.full-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; /* 可自定义列间距和行间距 */
}
/* 原有clear相关的代码可以全部删除 */

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