Как задать относительную высоту элемента в сетке?

Question

Есть сетка изображений (каждое с соотношением сторон 2:3) из 4-х элементов в строке. Как можно задать относительную высоту, чтобы при изменении разрешения, высота менялась пропорционально?

Сама сетка такая:

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 24px;
}

Answer 1

Если я правильно понял ваш вопрос, то, например, задать aspect-ratio

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 24px;
  
  background-color: #ddd;
}

.card {
  background-color: dodgerblue;
  aspect-ratio: 1/1; /* Квадрат */
}

<section class="grid">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
</section>

БЛОГ НА HUSL

Как задать относительную высоту элемента в сетке?

Ответы (1 шт):