CSS RWD带有不均匀的盒子

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

想要改进这个问题吗？更新问题，以便可以通过。

闭合 2年前。

Answer 1

使用网格而不是Flex，您可能会获得更多对布局的控制。

使用网格，您可以指定要进入哪一列的列。您还可以指定系统使用第一个可用的单元格将项目放入（使用“密度”），以便即使您是，也可以填写网格将第一项放入第三个单元格。

该片段使用您给出的代码，但作为纯HTML/CSS。

它的媒体查询为600px，当然可以根据需要更改。那时，它将网格设置为具有2列而不是3列。

通过使用GAP满足50px的要求。

.App {
  font-family: sans-serif;
  text-align: center;
  gap: 50px;
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(3, 1fr);
  margin: 10px;
  width: 100%;
  max-width: 400px;
}

.App>* {
  width: 100px;
  height: 150px;
}

.App> :nth-child(3n+1) {
  transform: translateY(10px);
  grid-column: 3;
}

.App> :nth-child(3n+2) {
  transform: translateY(30px);
  grid-column: 2;
}

.App> :nth-child(3n) {
  transform: translateY(50px);
  grid-column: 1;
}

@media (max-width: 600px) {
  .App {
    grid-template-columns: repeat(2, 1fr);
  }
  .App> :nth-child(odd) {
    grid-column: 2;
    transform: translateY(10px);
  }
  .App> :nth-child(even) {
    grid-column: 1;
    transform: translateY(30px);
  }
}

<div class="App">
  <div style="background-color: green;">box1</div>
  <div style="background-color: yellow;">box2</div>
  <div style="background-color: orange;">box3</div>
  <div style="background-color: purple;">box4</div>
  <div style="background-color: blue;">box5</div>
  <div style="background-color: grey;">box6</div>
  <div style="background-color: red;">box7</div>
  <div style="background-color: brown;">box8</div>
</div>