2 列，第二列垂直偏移

Question

CSS 中可以做这样的布局吗？

当然要保持秩序。

Answer 1

您可以使用

display: grid

创建 2 列网格布局。然后您可以使用

:nth-child(2n + 2)

或

:nth-child(even)

选择器选择第二列的所有项目。您可以通过添加正值

margin-top

和相等的负值

margin-bottom

来垂直偏移这些项目。

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em;
}

.grid :nth-child(2n + 2) {
  margin-top: 4em;
  margin-bottom: -4em;
}


/* for visualization purpose only */
.grid > div {
  border: 2px dashed red;
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>