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

#html #css #вёрстка #css_grid

Имеется grid в три колонки.

grid-template-columns: 1fr 1fr 1fr;


Необходимо сделать элементы квадратными на всех разрешениях без использования JS.
Возможно ли это?
    

Ответы

Ответ 1

Оказывается, всё-таки можно. Сделал по подобию из ответа на 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) единицы для ширины и высоты колонок.


Ответ 2

Вроде похоже.

Дальше добавить медиа запросы — и делать что угодно.



* {
  margin: 0;
  padding: 0;
}

.items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: 30vw 30vw 30vw;
  grid-template-rows: 30vw 30vw 30vw;
}

.item-1 {
  background: red;
}

.item-2 {
  background: green;
}

.item-3 {
  background: blue;
}

.item-4 {
  background: grey;
}

.item-5 {
  background: yellow;
}