Загрузка...В этом примере объединены некоторые концепции создания адаптивного макета с автоматически размещаемыми и гибкими дочерними элементами. Ключевые термины, которые нужно запомнить, это повторение (repeat), заполнение(auto) и minmax(), которые составляют аббревиатуру RAM.
Все вместе это выглядит так:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}Здесь используется repeat() с использованием ключевого слова auto-fit вместо явного числового значения. Это позволяет автоматически размещать дочерние элементы контейнера. У этих дочерних элементов базовое минимальное значение ширины 150px, а максимальное – 1fr. Это означает, что на экранах меньшего размера они будут занимать всю ширину 1fr, но когда они достигнут ширины 150 пикселей каждый, то начнут перетекать в одну строчку.
При значении auto-fit любые полностью пустые дорожки будут уменьшаться до 0, а заполненные дорожки будут увеличиваться, занимая их место. Однако, если это значение изменить на auto-fill, пустые дорожки будут занимать столько же места, сколько и в случае заполнения:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}