CSS网格：如何改变网格的流量？

Question

我没能找到解决方案，但看起来 CSS 网格应该很简单。

我有一个 2x2 的网格。到目前为止，我只有：

display: grid;
grid-template-columns: 50% 50%;

我的网格是这样的：

A1 A2

B1 B2

如何更改流程使其成为：

A1 B1

A2 B2

谢谢

Answer 1

You can create a code like this.

.container {
  width: 100%;
  background-color: coral;
  display: grid;
  grid-template-columns: 50% 50%;
}

.a1{
  background-color: blue;
}
.a2{
backgroud-color:yellow;
}
.b1{
  background-color: green;
}
.b2{
  background-color: yellow;
}

<div class="container">
  <div>
    <div class="a1">A1</div>
    <div class="a2">A2</div>
  </div>
  <div>
    <div class="b1">b3</div>
    <div class="b2">b4</div>
  </div>
</div>

Answer 2

正如 Temani 和 David 所说，您可以使用 grid-auto-flow 属性来更改网格算法放置网格项的方式。您还需要指定您的行：

.container {
  display: grid;
  grid-template: 50% 50% / 50%;
  grid-auto-flow: column;
}

<div class="container">
  <div>A1</div>
  <div>A2</div>
  <div>B1</div>
  <div>B2</div>
</div>

CSS网格：如何改变网格的流量？

CSS Grid: how to change the flow of a gird?

css

grid