Wie erstelle ich mit CSS Grid ein responsives 4-Spalten-Rasterlayout mit gleich großen Quadraten?

CSS Grid Square Layout

Möchten Sie ein Rasterlayout erstellen, das aus Quadraten besteht, wobei jede Zeile vier Quadrate enthält. Diese Quadrate verformen sich nicht, wenn sich die Bildschirmgröße ändert, und behalten immer die gleiche Breite und Höhe (feste Werte sind nicht wünschenswert). CSS Grid ist erforderlich. So geht's:

Mit CSS können Sie über ein Pseudoelement immer ein Seitenverhältnis von 1:1 beibehalten oder die neue Eigenschaft „aspektverhältnis“ verwenden, zum Beispiel:

.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>

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