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%;
}
Code-Sprache: CSS (css)
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;
Nächster Artikel