Wie kann ich nur mit CSS ein reaktionsfähiges Raster aus unveränderlichen quadratischen Elementen erstellen?

Erstellen eines Rasterlayouts aus unveränderlichen quadratischen Elementen mit CSS

In dieser Abfrage besteht das Ziel darin, ein Rastersystem aus quadratischen Elementen zu erstellen die ihre Abmessungen unabhängig von Anpassungen der Bildschirmgröße beibehalten. Die Notwendigkeit fester Werte entfällt und die Implementierung eines CSS-Rasters ist erforderlich.

Um dies zu erreichen, besteht eine effektive Methode darin, ein Pseudoelement zu verwenden, um ein konsistentes Seitenverhältnis von 1:1 aufrechtzuerhalten. Alternativ kann die neueste „aspect-ratio“-Eigenschaft verwendet werden, wie unten dargestellt:

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

Im bereitgestellten HTML-Code stellt jedes „div“-Element ein Quadrat dar:

<div>

Durch diesen Ansatz wird sichergestellt, dass die quadratischen Elemente ihr Seitenverhältnis beibehalten und unverzerrt bleiben, wenn die Bildschirmgröße geändert wird.

Das obige ist der detaillierte Inhalt vonWie kann ich nur mit CSS ein reaktionsfähiges Raster aus unveränderlichen quadratischen Elementen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!