как передать один на второй столбец в конце 5 элементов?

Question

Я хотел бы иметь возможность передать 5-й элемент в другой столбец, как на картинке, которую я прикрепляю.

здесь моя картинка

У меня есть попробовал несколько вещей с flexbox

<div class="container">
    <div class="field">element 1</div>
    <div class="field">element 2</div>
    <div class="field">element 3</div>
    <div class="field">element 4</div>
    <div class="field">element 5</div>
    <div class="field">element 6</div>
</div>

Мой файл sass:

 container {
    display: flex;
    flex-wrap: wrap;

    .field {
      &:nth-child(5){
        display: flex;
      }
    }

спасибо!

Answer 1

CSS -Сетка может сделать это, если вы определите максимальное количество строк.

Пример с 5 строками ...

.container {
  display: inline-grid;
  grid-template-rows: repeat(5, max-content);
  grid-auto-flow: column;
  gap: 1em;
  padding: 1em;
}

.field {
  border: 1px solid red;
  padding: .5em;
  background: lightblue;
}

<div class="container">
  <div class="field">element 1</div>
  <div class="field">element 2</div>
  <div class="field">element 3</div>
  <div class="field">element 4</div>
  <div class="field">element 5</div>
  <div class="field">element 6</div>
</div>

Пример с 15 элементами и 4 строками ...

.container {
  display: inline-grid;
  grid-template-rows: repeat(4, max-content);
  grid-auto-flow: column;
  gap: 1em;
  padding: 1em;
}

.field {
  border: 1px solid red;
  padding: .5em;
  background: lightblue;
}

<div class="container">
  <div class="field">element 1</div>
  <div class="field">element 2</div>
  <div class="field">element 3</div>
  <div class="field">element 4</div>
  <div class="field">element 5</div>
  <div class="field">element 6</div>
  <div class="field">element 7</div>
  <div class="field">element 8</div>
  <div class="field">element 9</div>
  <div class="field">element 10</div>
  <div class="field">element 11</div>
  <div class="field">element 12</div>
  <div class="field">element 13</div>
  <div class="field">element 14</div>
  <div class="field">element 15</div>
</div>

Answer 2

Вы можете заказать пользователя для каждого столбца

.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }