Всем привет!
Начал знакомство с css grid, решил сразу опуститься в омут и начать верстать личный проект на них. Столкнулся с проблемой, которая как мне кажется связана с поведением фракционной шириной сетки.
Дано:
12 столбиков 1fr шириной. Задаю для второй строки grid-template-areas. Внутрь помещаю дочерний элемент с display: flex что бы в ряд разместить картинку и текст. Для картинки задаю ширину равную высоте родителя (что бы получить квадратный контейнер для картинки). Но на деле контейнер картинки имеет плавующую ширину в зависимости от ширины главного контейнера.
Демка:
Подскажите почему так происходит? Подозреваю что дело в фракционной ширине столбиков, но конкретной причины я понять не могу( Что с этим можно сделать? Есть какие то более удачные практики?
Мне нужно что бы размер картинки был неизменен, а ширина текстового блока подстраивалась под оставшиеся место.
P.S: Любые советы приветствуются!
Что грид, что флекс - делают грид-элементами и флекс-элементами соответственно только свои дочерние элементы - на дальнейших потомков они не влияют. То есть законы грида распространяются только на item-1 и item-2, а законы флекс - на .pic-container и .text-container.
Вариант 1
Соответственно, для отключения сжатия элемента .pic-container нужно работать с ним через флекс, а не через грид
Для .pic-container достаточно добавить свойство
flex-shrink: 0
Это свойство управляет коэффициентом сжатия флекс элемента. По-умолчанию оно равно 1, если поставить 0, элемент не будет сжиматься.
Вариант 2.
Или можно не париться, а вставить в .pic-container картинку ровно в 150px и элемент не сможет сжиматься до значений меньших чем 150px)) Но тогда, что-то может да поехать, если в будущем не все итемы будут с картинкой.
Вариант 3
Или можно просто вместо width использовать min-width)
Спасибо! flex-shrink: 0; помогло.
Не совсем понял почему когда я задаю 150px контейнеру для картинки, оно все ровно сжимается…