自定义CSS网格列高不一致导致排版错位的修复方法

这可是自定义浮动网格里超常见的坑！我自己手写网格系统的时候也踩过一模一样的雷，给你几个不用Bootstrap就能搞定的方案，从简单兼容到现代优化都有：

1. 用Clearfix给每行分组（最适配传统浮动网格的方案） #

问题根源就是浮动元素高度不一，第三列会被第一行的高元素“卡住”。解决思路是把每一行的元素单独用容器包裹，然后给行容器加清除浮动的样式：

HTML结构调整： #

<div class="grid-row">
  <div class="tablet-col-6">内容1（高度较高）</div>
  <div class="tablet-col-6">内容2</div>
</div>
<div class="grid-row">
  <div class="tablet-col-6">内容3</div>
  <div class="tablet-col-6">内容4</div>
</div>

新增Clearfix CSS： #

.grid-row::after {
  content: "";
  display: table;
  clear: both; /* 清除左右浮动，确保下一行不受上一行影响 */
}

同时别忘了给你的列加上box-sizing: border-box，防止padding/border撑宽列导致宽度溢出：

.tablet-col-6 {
  float: left;
  width: 50%;
  box-sizing: border-box; /* 关键！确保宽度包含内边距和边框 */
  /* 其他原有样式... */
}

2. 用Flexbox重构你的网格系统（推荐现代方案） #

浮动布局本来就不是为网格设计的，Flexbox天生就能解决高度对齐和换行问题。直接把你的网格容器改成Flex布局，再也不用操心浮动错位：

CSS修改： #

.grid-container {
  display: flex;
  flex-wrap: wrap; /* 允许元素换行 */
  margin: 0 -15px; /* 抵消列的内边距，根据你的间距调整 */
}

.tablet-col-6 {
  flex: 0 0 50%; /* 固定占50%宽度，不拉伸不收缩 */
  padding: 0 15px; /* 列间距 */
  box-sizing: border-box;
  /* 去掉原来的float: left */
}

这样不管每列内容高度差多少，Flex都会自动把下一行的元素对齐到行首，彻底解决错位问题。

3. 用CSS Grid实现更灵活的网格（进阶方案） #

如果你的项目不需要兼容IE这类老浏览器，CSS Grid是更强大的选择，代码更简洁，布局能力更强：

CSS修改： #

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 自动生成两列，每列宽度相等 */
  gap: 30px; /* 列间距和行间距一步搞定，不用额外处理padding */
}

/* 原来的tablet-col-6可以简化，甚至不用专门的类，直接给子元素设置样式 */
.tablet-col-6 {
  /* 这里可以只保留内容相关的样式，宽度由Grid自动控制 */
}

Grid会自动把元素按行列排列，完全不会出现高度不一致导致的错位问题。

4. 临时方案：统一列的最小高度 #

如果只是临时解决，且内容高度差异不大，可以给所有列设置统一的最小高度：

.tablet-col-6 {
  min-height: 320px; /* 根据你的内容实际高度调整 */
  box-sizing: border-box;
}

但这个方案不够灵活，如果内容超过最小高度会溢出，适合内容可控的场景。

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