5

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

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

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

0

2 ответа 2

3

Современными средствами это достигается через 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) единицы для ширины и высоты колонок.

0

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

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

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

2
  • grid-template-columns:30vw 30vw 30vw - переназначает же 1fr 1fr 1fr. Видимо, я не совсем корректно сформулировала вопрос, хотелось бы, чтобы высота принимала значение ширины. Но спасибо за идею.
    – red ale
    5 апр 2018 в 8:40
  • вот так и переназначили мы т.е сделали vw=vh , но бывает ещё другие способы сделать 100% квадратный элемент
    – user33274
    5 апр 2018 в 8:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.