Wie erstelle ich ein responsives CSS-Rasterlayout aus gleich großen Quadraten?

CSS-Rasterlayout im Quadrat

Diese Frage untersucht die Feinheiten der Erstellung eines CSS-Rasterlayouts, das aus Quadraten besteht, wobei jedes Quadrat sein Seitenverhältnis behält während der Bildschirmgröße.

Implementierung der Layout

Um dieses Layout zu erreichen, berücksichtigen Sie den folgenden CSS-Code:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

Den Code verstehen

• Anzeige: Grid;: Aktiviert das Rasterlayout für das Containerelement.
• grid-template-columns: 1fr 1fr 1fr 1fr;: Definiert ein Raster mit vier Spalten gleicher Breite (1fr = ein Bruchteil des verfügbaren Platzes).
• grid-gap: 5px;: Legt einen 5-Pixel-Abstand zwischen Rasterzellen fest.
• Hintergrundfarbe: rot;: Stilisiert die Rasterzellen mit einem roten Hintergrund.
• Seitenverhältnis: 1;: Behält das Seitenverhältnis bei Verhältnis jeder Zelle 1:1. Diese Eigenschaft stellt sicher, dass die Quadrate unabhängig von der Bildschirmgröße quadratisch bleiben.

Mit diesem Ansatz können Sie ein Raster aus Quadraten erstellen, das bei der Größenänderung sein Seitenverhältnis beibehält und so ein flexibles und reaktionsfähiges Layout bietet.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein responsives CSS-Rasterlayout aus gleich großen Quadraten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!