how can i set grid element rotation

Question

Please tell me how to set the order of grid elements from bottom to top, i.e., now there are two columns from 1 to 10, and the default order is left to right. I need to do this: 1st column from 1..5 (from top to bottom); 2nd column 6..10 (from top to bottom).

.main {
  display: flex;
  justify-content: center;
  width: 100%; 
}

.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 50px;  
}

<div class="main">
  <div class="content">
    <div class="grid_element">
    1
    </div>
    <div class="grid_element">
    2
    </div>
    <div class="grid_element">
    3
    </div>
    <div class="grid_element">
    4
    </div>
    <div class="grid_element">
    5
    </div>
    <div class="grid_element">
    6
    </div>
    <div class="grid_element">
    7
    </div>
    <div class="grid_element">
    8
    </div>
    <div class="grid_element">
    9
    </div>
    <div class="grid_element">
    10
    </div>
  </div>
</div>

Answer 1

You have to set an explicit number of rows and then tell the grid to flow in columns.

.main {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
}

<div class="main">
  <div class="content">
    <div class="grid_element">
      1
    </div>
    <div class="grid_element">
      2
    </div>
    <div class="grid_element">
      3
    </div>
    <div class="grid_element">
      4
    </div>
    <div class="grid_element">
      5
    </div>
    <div class="grid_element">
      6
    </div>
    <div class="grid_element">
      7
    </div>
    <div class="grid_element">
      8
    </div>
    <div class="grid_element">
      9
    </div>
    <div class="grid_element">
      10
    </div>
  </div>
</div>