В этом седьмом примере объедините некоторые концепции, о которых вы уже узнали, чтобы создать адаптивный макет с автоматически размещаемыми и гибкими дочерними элементами. Довольно аккуратно. Ключевые термины, которые здесь следует запомнить, — это 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));
}
HTML
<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>
CSS
.parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}