Wie erstelle ich ein responsives Quadratgitter mit zentriertem Inhalt?

Gitter aus reaktionsfähigen Quadraten

In diesem Stack Overflow-Thread erkundigt sich ein Benutzer nach der Erstellung eines Layouts aus reaktionsfähigen Quadraten mit vertikaler und horizontaler Ausrichtung ausgerichteter Inhalt.

Originallösung (2018)

Die ursprüngliche Lösung schlug vor, die CSS-Eigenschaft display:flex zu verwenden, um ein flexibles Layout zu erstellen, und die Eigenschaften align-items:center und justify-content:center, um den Inhalt darin jeweils zu zentrieren Quadrat. Das responsive Design wurde mithilfe von Medienabfragen erreicht.

<br>.container {<br> display: flex;<br> flex-direction: row;<br> flex-wrap: wrap; <br> justify-content: space-around;<br>}</p>
<p>.square {<br> width: 100px;<br> height: 100px;<br> display: flex;<br> align-items: center;<br> justify-content: center;<br>}</p>
<p>@media (max -width: 768px) {<br> .square {</p>
<pre class="brush:php;toolbar:false">width: 50%;

}
}

Aktualisierte Lösung (2022)

Mit Mit der Weiterentwicklung von CSS wurden mehrere neue Eigenschaften eingeführt, die die Implementierung eines quadratischen Gitters vereinfachen Layout:

• Gitter: Definiert ein Rasterlayout für den Container.
• Seitenverhältnis: Gibt das Seitenverhältnis jedes Rasterelements an und stellt sicher, dass es quadratisch bleibt.
• Objektanpassung: Steuert, wie Bilder innerhalb der Quadrate angezeigt werden, und ermöglicht so eine Zentrierung und Bildanpassung Verhalten.

<br>.container {<br> display: Grid;<br> Grid-Template-Columns: Repeat(3, 1fr);<br> Lücke: 2 %;<br>}</p>
<p>.square {<br> Seitenverhältnis: 1/1;<br> Anzeige: Flex;<br> Elemente ausrichten: Mitte;<br> Inhalt ausrichten: Mitte;<br> Polsterung: 5 %;<br> Hintergrundfarbe: #1E1E1E;<br> Farbe: #fff;<br>}</p>
<p>.square img {<br> width: 100 %;<br> Höhe: 100 %;<br> Objektanpassung: enthalten;<br> Objektposition: Mitte;<br>}</p>
<p>.square.fullImg {<br> Polsterung: 0 ;<br>}</p>
<p>.square.fullImg img {<br> object-fit: cover;<br>}<br>

Das Endergebnis erstellt ein responsives Rasterlayout mit Quadraten, das verschiedene Arten von Inhalten, einschließlich Text, Bildern und Listen, enthalten kann, während die Ausrichtung und beibehalten wird Seitenverhältnis.

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