Имеется grid в три колонки.
grid-template-columns: 1fr 1fr 1fr;
Необходимо сделать элементы квадратными на всех разрешениях без использования JS. Возможно ли это?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуСовременными средствами это достигается через CSS свойство aspect-ratio
. Сделал по подобию из ответа на enSO
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.container > div {
background-color: red;
aspect-ratio: 1 / 1;
}
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
Раньше соотношение сторон достигалось через процентный padding-bottom
.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.container div {
background-color: red;
padding-bottom: 100%;
height: 0;
}
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
Также можно использовать 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;
}
<div class="grid">
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
Также возможно использовать vw
и vh
если нужна ширина в процентах от ширины или высоты окна браузера.
Ещё можно использовать фиксированные (px
, cm
, mm
, in
) или зависящие от размера шрифта (em
, rem
, ex
, pt
, pc
) единицы для ширины и высоты колонок.
Вроде похоже.
Дальше добавить медиа запросы — и делать что угодно.
* {
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>