Css grid-template-columns minmax становится меньше указанного максимума? - PullRequest
Новая
       5

Css grid-template-columns minmax становится меньше указанного максимума?

0 голосов
/ 28 января 2020 
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
grid-auto-rows: 80px;
column-gap: 5px;
row-gap: 5px;
grid-auto-flow: dense;

У меня есть вышеуказанный код для создания адаптивной сетки. Минимальный размер столбцов должен составлять 80 пикселей. Я заполняю сетку с помощью div, чтобы визуализировать это. Это следующий код. 

grid-row: span 4;
grid-column: span 4;
background-color: green;

grid-row: span 2;
grid-column: span 2;
background-color: red;

grid-row: span 8;
grid-column: span 2;
background-color: blue;

Он отлично работает в полноэкранном режиме и реагирует по большей части, однако, когда я изменяю размер окна на мобильное устройство, появляется очень маленький столбец, который получает произведено.

https://imgur.com/a/z21uRTb

Инспекторские фотографии по ссылке выше. Зеленые блоки должны быть в два раза больше красных блоков, что я думаю, но они обрезаются. Вы также можете увидеть, что контуры сетки показывают очень маленький столбец в самом конце. Почему это происходит, я подумал, что сетка просто поместит зеленый блок в новую строку.

Редактировать: Я считаю, что разрыв в столбцах и разрыв строк был причиной, и удалил его. Не уверен, как бы я оставил пробел между строками и столбцами без неожиданных столбцов, идущих ниже установленного минимума.

1 Ответ

0 голосов
/ 29 января 2020

Если вы хотите установить минимальный размер для каждого дочернего столбца, для которого установлен нестандартный размер, вы можете использовать calculated column total number вместо auto-fit в родительском grid-template-columns:repeat(auto-fit, minmax(80px, 1fr));.

grid-template-columns: repeat(8, minmax(80px,1fr));

Как получить вычисленный результат 8fr?

столбец сетки красного цвета: диапазон 2

столбец сетки синего цвета: диапазон 2

сетка зеленого цвета -колонка: диапазон 4

сетка-столбец в один ряд = 8 (2 (красный) + 2 (синий) + 4 (зеленый)) 

grid-column: span 2;
background-color: red;

grid-column: span 2;
background-color: blue;

grid-column: span 4;
background-color: green;
...