CSS Grid实现每行2个自适应高度项，消除间距问题

问题原因 #

CSS Grid 默认按顺序逐行排列项目，每行的高度由该行内最高的项目决定。如果某一行的其中一个项目高度远高于另一个，另一列下方会产生空白区域，后续项目会从下一行开始排列，导致你看到的第4个项目与第2个项目之间的间距。

解决方案 #

使用 grid-auto-flow: dense 属性让Grid自动填充前面的空白区域，无需硬编码项目高度，完美适配动态内容。

示例代码

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 固定每行2列 */
  gap: 1rem; /* 项目间的间距，可按需调整 */
  grid-auto-flow: dense; /* 核心属性：自动填充空白区域 */
}

.grid-item {
  border: 1px solid #e0e0e0;
  padding: 1.2rem;
  /* 其他自定义样式 */
}

原理说明 #

grid-auto-flow: dense 会指示Grid布局引擎，在排列项目时优先填充之前行中留下的空白区域，而不是严格按照项目顺序逐行排列。这样第4个项目会自动填补第2个项目下方的空白，实现紧贴排列的效果，同时所有项目的高度仍然由内部文本内容自适应撑开，完全适配API返回的动态内容。

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