чередование элементов grid

Question

Подскажите пожалуйста, как установить порядок грид-элементов с низу в верх, т.е., сейчас есть две колонки от 1 до 10, и порядок, по умолчанию слева на право. Мне же необходимо сделать так: 1-я колонка от 1..5 (с верху вниз); 2-я колонка 6..10 (с верху вниз).

.main {
  display: flex;
  justify-content: center;
  align-items: 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

Вариант 1. Задать кол-во рядов (не гибкое решение)

grid-template-rows: repeat(5, 1fr);

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

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

.grid_element{
   border: 1px solid #ccc;   
}

<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>

Вариант 2. Использовать columns

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

.content {
  column-count: 2;
  column-gap: 20px;
}

.grid_element {
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

<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>

БЛОГ НА HUSL

чередование элементов grid

Ответы (1 шт):