ОЗУ (повтор, авто, минмакс)

В этом седьмом примере объедините некоторые концепции, о которых вы уже узнали, чтобы создать адаптивный макет с автоматически размещаемыми и гибкими дочерними элементами. Довольно аккуратно. Ключевые термины, которые здесь следует запомнить, — это repeat , auto-(fit|fill) и minmax() , которые вы помните под аббревиатурой RAM.

Все вместе это выглядит так:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Вы снова используете repeat() , но на этот раз вместо явного числового значения используется ключевое слово auto-fit . Это позволяет автоматически размещать дочерние элементы. Эти дочерние элементы имеют базовое минимальное значение 150px с максимальным значением 1fr , что означает, что на экранах меньшего размера они будут занимать всю ширину 1fr , а когда они достигнут ширины 150px каждый, они начнут перетекать в одну и ту же строку.

При auto-fit любые полностью пустые дорожки свернутся до 0 , а заполненные дорожки будут расти, занимая все свое пространство. Однако если вы измените это значение на auto-fill , пустые дорожки будут занимать тот же объем места, что и если бы они были заполнены:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}