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

I haven't been able to find a solution, but it seems it should be simple enough with CSS Grid.

I have a 2x2 grid. So far, I have only:

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

My grid looks like this:

A1 A2

B1 B2

How do I change the flow so that it's:

A1 B1

A2 B2

Thank you

CodePudding user response：

As Temani and David have said, you can use the grid-auto-flow property to change how grid items are placed by the grid algorithm. You'll also need to specify your rows:

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

<div >
  <div>A1</div>
  <div>A2</div>
  <div>B1</div>
  <div>B2</div>
</div>

CodePudding user response：

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 >
  <div>
    <div >A1</div>
    <div >A2</div>
  </div>
  <div>
    <div >b3</div>
    <div >b4</div>
  </div>
</div>