Wie kann ich mit CSS Grid ein responsives quadratisches Rasterlayout erstellen?

Erstellen eines quadratischen Rasterlayouts mit CSS Grid

Das Erstellen eines Layouts aus Quadraten mit vier Quadraten in jeder Reihe kann mit CSS erreicht werden Netz. Um sicherzustellen, dass die Quadrate auch bei einer Größenänderung des Bildschirms ihre Form behalten, ist es wichtig, die Verwendung fester Werte zu vermeiden.

Beispielcode

Der folgende Code zeigt, wie man einen solchen erstellt Layout:

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

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

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Erklärung

• Das .container-Element ist auf display: Grid eingestellt und verwendet eine Rastervorlage mit vier gleichwertigen Spalten Breite.
• Die Grid-Gap-Eigenschaft fügt eine 5-Pixel-Lücke zwischen den hinzu Quadrate.
• Jedes Quadrat, das durch den .container div-Selektor dargestellt wird, hat eine rote Hintergrundfarbe.
• Die von modernen Browsern unterstützte Eigenschaft „Seitenverhältnis“ wird verwendet, um ein 1:1 beizubehalten Seitenverhältnis für jedes Quadrat, um sicherzustellen, dass sie unabhängig von der Bildschirmgröße oder -ausrichtung quadratisch bleiben.

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