Загрузка...В этом примере используется функция minmax() для макетов сетки. Здесь эта функция используется для установки минимального размера боковой панели в 100 пикселей, но на больших экранах это значение увеличивается до 25% ширины. Таким образом боковая панель всегда будет занимать 25% горизонтального пространства своего родителя, пока эти 25% не станут меньше 100 пикселей.
Реализовать такое можно с помощью CSS-свойства grid-template-columns со следующим значением: minmax(100px, 25%) 1fr. Элемент в первом столбце (в данном случае боковая панель) получает минимальный размер 100px и максимальный 25%, а второй элемент (здесь основной раздел) занимает оставшееся пространство 1fr.
.parent {
display: grid;
grid-template-columns: minmax(100px, 25%) 1fr;
}