Я настраиваю макет с помощью CSS-сетки, которая должна иметь ячейки фиксированного размера, но с неопределенным общим размером.То есть размер (h и w) контейнера div может варьироваться, но размеры различных элементов div всегда должны соответствовать фиксированному проценту (h и w) контейнера.
Согласно этому вопросу и другому вопросу, который относится к , правильный способ достижения желаемого результата на уровне контейнера состоит в использовании синтаксиса minmax (0, значение)для размеров дорожки.В ответах на вопросы использовались новые дробные единицы и приведены примеры как minmax (0, fr), но я подумал, что это может работать и с процентами, и я попробовал это:
.container {
display: grid;
grid-template-rows: minmax(0, 3%) minmax(0,3%) minmax(0, 5%) minmax(0, 53%) minmax(0, 8%) minmax(0, 3%) minmax(0, 20%) minmax(0, 5%) ;
grid-template-columns: minmax(0, 3%) minmax(0,54%) minmax(0, 3%) minmax(0, 40%);
}
Это не работает: размеры ячеекдля размещения переполненного контента вместо показа полос прокрутки при необходимости.Но если я переключусь на указание треков в пикселях и даже с обычным синтаксисом, ячейки останутся такими, как ожидалось:
.container {
display: grid;
grid-template-rows: 20px 20px 30px 310px 50px 20px 110px 30px ;
grid-template-columns: 20px 410px 20px 300px ;
}
Но, конечно, тогда общий размер будет фиксированным, что не сработает.Синтаксис minmax (0, x) не работает для блоков, отличных от дробей?Или я не на том пути?