Как сместить grid-элементы на новый ряд?

Question

Столкнулся с таким вопросом и не могу найти решение. Как можно grid элементы которым задан minmax() при достижении минимального размера перемещаться на новую строку?

Как пример

.grid {
    display: grid;
    grid-template-columns: minmax(250px, 270px) minmax(300px, 430px) minmax(350px, 500px);
    grid-auto-rows: 200px;
}

.example1,
.example2,
.example3 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #eaeaea;
}

.example1 {
    background-color: #0c31aa;
}

.example2 {
    background-color: rgb(126, 7, 7);
}

.example3 {
    background-color: rgb(99, 5, 153);
}

    <div class="grid">
        <div class="example1">One</div>
        <div class="example2">Two</div>
        <div class="example3">Three</div>
    </div>

Что я хочу получить? Что бы при достижении минимального размера, элемент перепрыгивал на новую неявную строку.

Answer 1

В вашем коде жестко указано 3 колонки, можно указать repeat auto-fill и тогда количество колог будет изменятся в зависимости от размера грида и от внутреннего размера ячеек.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 200px));
  width: 500px;
  background: aqua;
}

.grid div {
  background-color: green;
  padding: 1.5em;
  color: #fff;
  border: 1px solid blue;
  counter-increment: grid-item;
}

.grid div::before {
  content: counter(grid-item);
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

БЛОГ НА HUSL

Как сместить grid-элементы на новый ряд?

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