如何用CSS实现Div元素的跨行交替排列？

你可以用CSS Grid轻松实现这种布局，无需修改现有HTML结构，以下是具体方案：

第一步：补全HTML容器结构 #

给所有目标div套一个容器，方便统一控制样式：

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <!-- 更多div可继续按顺序添加 -->
</div>

第二步：编写CSS样式 #

固定列数（和你示例的5列完全匹配） #

如果需要固定每行显示5个元素，使用以下CSS：

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 固定5列，每列宽度均分容器 */
  grid-auto-flow: dense; /* 强制填充网格空白，避免奇数项因顺序问题留空 */
  gap: 10px; /* 可选：设置元素间的间距 */
}

/* 奇数序号的div放在第一行 */
.grid-container div:nth-child(odd) {
  grid-row: 1;
}

/* 偶数序号的div放在第二行 */
.grid-container div:nth-child(even) {
  grid-row: 2;
}

自适应列数（随容器宽度自动调整列数） #

如果想要布局根据容器宽度自适应变化，把列数设置改成自适应写法：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* 元素最小宽度80px，自动分配列数 */
  grid-auto-flow: dense;
  gap: 10px;
}

.grid-container div:nth-child(odd) {
  grid-row: 1;
}

.grid-container div:nth-child(even) {
  grid-row: 2;
}

效果说明 #

• 所有奇数序号的div会自动排列在第一行，偶数序号的div排列在第二行
• 新增更多div时，奇数项会继续填充第一行的剩余列，偶数项填充第二行，完全符合你要的1 3 5 7 9 / 2 4 6 8 10排列规则

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