Как сделать чтобы минимальная ширина и высота блоков задавалась по содержимому с помощью grid или flex?

Question

[Vlad_isLove]

Например, если вывести 3 блока, то они должны занимать собой всю ширину родителя и быть одинаковой ширины и высоты(высота по высоте наибольшего), но когда контент в одном из них не помещается, то по ширине блоки становятся по 2 и опять же занимать собой всю ширину родителя и быть одинаковой ширины и высоты, а третий переносится ниже и его ширина и высота как у всех. Как сделать такое с помощью стилей Grid или Flex?

Answer 1

[geektimer]

Проще использовать grid с темплейтом колонок:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

Вот пример: https://codepen.io/kekinlol/pen/PoYGaVZ