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

350

06 апреля 2018, 14:51

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

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

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

Answer 1

Вроде похоже

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

*{ 
  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; 
}

<div class="items"> 
<div class="item item-1"></div> 
<div class="item item-2"></div> 
<div class="item item-3"></div> 
<div class="item item-4"></div> 
<div class="item item-5"></div> 
</div>