无需JavaScript，如何用CSS实现流式阶梯状同级元素？

嘿，我找到一个完美符合你需求的纯CSS方案！不用写一行JS，不管你加多少元素都能自动形成阶梯布局，而且完全满足你提到的所有限制条件。

核心思路是利用CSS Grid的网格定位能力，通过nth-child(n)选择器把每个子元素精准放到对应位置，自动形成阶梯效果，完全不用手动给每个元素设置边距或定位。

实现代码 #

首先是你的HTML结构（可以随便加更多元素，完全不影响）：

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>.</div>
  <!-- 想加多少加多少，比如 <div>4</div><div>5</div> 都没问题 -->
  <!-- 混入其他元素也可以，比如 <div class="extra">额外内容</div> -->
</div>

然后是CSS部分：

#container {
  display: grid;
  /* 用min-content让列宽自适应内容，优先支持灵活尺寸 */
  grid-template-columns: repeat(auto-fill, min-content);
  grid-auto-rows: min-content;
  gap: 0.5em; /* 可选：调整元素间的空隙，让布局更美观 */
}

/* 关键：把第n个元素定位到第n列第n行，形成对角线阶梯 */
#container > div:nth-child(n) {
  grid-column: n;
  grid-row: n;
}

/* 可选：给混入的其他元素设置样式，避免干扰阶梯布局 */
#container > .extra {
  grid-column: 1; /* 固定放在第一列 */
  grid-row: auto; /* 自动分配行位置 */
  margin-bottom: 1em;
}

横向阶梯调整 #

如果你想要的是横向排列的阶梯（像你例子里的[1] [2] [3] [.]那样），只需要修改一下元素的行定位，把所有元素放在同一行：

#container > div:nth-child(n) {
  grid-column: n;
  grid-row: 1; /* 所有元素都在第一行 */
}

方案优势 #

• 流式适配：不管你加多少元素，浏览器都会自动创建足够的列/行，阶梯效果不会断。
• 灵活尺寸：用min-content自动适配元素内容，不用固定宽高；如果需要固定尺寸，把min-content换成具体数值（比如20px）就行。
• 无JS/无绝对定位：纯CSS实现，完全符合你的要求，不用逐个给元素写样式。
• 支持混入元素：随便在容器里加其他元素，简单设置网格位置就能融入布局。

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