Wie kann ich ein responsives quadratisches Rasterlayout nur mit CSS-Raster erstellen?

CSS-Rasterbasiertes quadratisches Layout

Diese Frage untersucht die Erstellung eines CSS-Rasterlayouts, das aus Quadraten besteht, die ihre Abmessungen unabhängig vom Bildschirm beibehalten Größe. Es erfordert die Verwendung von CSS Grid und verbietet Festwertabmessungen.

Lösung:

Sie können dies mithilfe der Eigenschaft „aspect-ratio“ erreichen:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.container div {
  background-color: red;
  aspect-ratio: 1;
}

Die Eigenschaft „Seitenverhältnis“ sorgt dafür, dass Breite und Höhe der Quadrate immer im Verhältnis 1:1 bleiben und ihre quadratische Form erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich ein responsives quadratisches Rasterlayout nur mit CSS-Raster erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!