Квадратные элементы в css grid

Имеется grid в три колонки.
grid-template-columns: 1fr 1fr 1fr;
Необходимо сделать элементы квадратными на всех разрешениях без использования JS. Возможно ли это?

Ответ

Оказывается, всё-таки можно. Сделал по подобию из ответа на enSO
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5px; } .container div { background-color: red; padding-bottom: 100%; height: 0; }

A

B

C

D

E

F

G

Также можно поддерживать другие соотношения сторон с помощью процентного padding-bottom

Ещё варианты
Также можно использовать vmin (или vmax) для строк и стоблцов. Это подойдёт если вы ведёте речь про блоки, которые занимают большую часть экрана.
.grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 30vmin); grid-template-rows: repeat(3, 30vmin); } .grid__item { background-color: orange; }

Также возможно использовать vw и vh если нужна ширина в процентах от ширины или высоты окна браузера.
Ещё можно использовать фиксированные (px, cm, mm, in) или зависящие от размера шрифта (em, rem, ex, pt, pc) единицы для ширины и высоты колонок.