RAM (Repeat, Auto, Minmax)

RAM (Repeat, Auto, Minmax)

В этом примере объединены некоторые концепции создания адаптивного макета с автоматически размещаемыми и гибкими дочерними элементами. Ключевые термины, которые нужно запомнить, это повторение (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, пустые дорожки будут занимать столько же места, сколько и в случае заполнения:

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

See this code RAM: repeat-auto-minmax on x.xhtml.ru.