15. November 2023

Responsive, quadratische divs mit CSS

Mit der CSS-Eigenschaft „aspect-ratio“ kannst die Höhe von divs (und anderen Elementen) responsive anpassen ohne die Breite zu kennen. Das ist z.B. sehr praktisch, wenn die Breite eines divs in Prozent definiert ist.

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

.box{
  background-color: #ccc;
  aspect-ratio: 1;
  width:100%;
}

Natürlich können auch andere Seitenverhältnisse angegeben werden. Wenn die divs nur halb so hoch sein sollen, kann man folgendes CSS nutzen:

  aspect-ratio: 1/2;