Wie erstelle ich mit CSS ein responsives Quadratgitter?

Erstellen eines responsiven Rasters aus Quadraten

Einführung:
Das Erstellen eines Layouts mit responsiven Quadraten kann oft eine herausfordernde Aufgabe sein. Mit Hilfe von CSS-Techniken ist es jedoch möglich, diesen Effekt zu erzielen.

Responsives Quadratlayout:
Das bereitgestellte Beispiel zeigt ein Raster aus Quadraten mit vertikal und horizontal ausgerichteten Inhalten. Um dieses Layout zu implementieren, verwenden wir die Eigenschaften „grid“ und „aspect-ratio“.

CSS-Implementierung:
Der folgende CSS-Code erstellt das Raster und legt das Seitenverhältnis fest Verhältnis jedes Quadrats, um seine quadratische Form beizubehalten:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
}

.square {
  aspect-ratio: 1 / 1;
}

Inhalt Ausrichtung:
Um den Inhalt innerhalb jedes Quadrats auszurichten, verwenden wir die Eigenschaften „flex“ und „align-items“:

.square {
  display: flex;
  align-items: center;
}

Flexible Inhaltsverarbeitung:
Die Quadrate können verschiedene Inhaltstypen aufnehmen, darunter Text, Bilder und Listen. Um sicherzustellen, dass der Inhalt zentriert bleibt, wenden wir eine entsprechende Polsterung an und stellen sicher, dass Bilder innerhalb der Quadrate enthalten sind:

.square {
  padding: 5%;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

Bilder in voller Breite:
Für Quadrate, die in voller Breite angezeigt werden Breite Bilder entfernen wir die Polsterung und passen die Eigenschaft „Objektanpassung“ an, um das Quadrat abzudecken vollständig:

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}

Dynamische Größenanpassung:
Durch die Definition der Eigenschaft „grid-template-columns“ als „repeat(3, 1fr)“ passen die Quadrate ihre Breite dynamisch an basierend auf dem verfügbaren Platz, Beibehaltung eines reaktionsfähigen Layouts auf verschiedenen Bildschirmgrößen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS ein responsives Quadratgitter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!