Wie kann ich mit Flexbox oder Grid ein responsives Quadratgitter erstellen?

Raster aus reaktionsfähigen Quadraten

Die Anzeige eines Rasters aus Quadraten, die auf unterschiedliche Bildschirmgrößen reagieren und vertikal und horizontal ausgerichtete Inhalte enthalten, kann sein erreicht mit einer Implementierung von Flexbox oder Raster.

Flexbox

Mit Flexbox können Sie ein flexibles Raster wie folgt erstellen:

 display: flex;<br> flex-wrap: wrap;<br> justify-content: space-around;<br> align-content: start;<br>}<p>.square {<br> flex-grow: 1;<br> max-width : 200px;<br> Hintergrundfarbe: #f1f1f1;<br> Rand: 10px;<br> padding: 20px;<br> text-align: center;<br>}</p><p>@media (max-width: 768px) {<br> .square {</p><pre class="brush:php;toolbar:false">max-width: 100px;

}
}

 <div class="square">Quadrat 1</div>&gt ;<br> <div> <div class="square">Quadrat 3</div>
<br>
</div>

Grid

Alternativ Sie Sie können das Rasterlayout verwenden, um mehr Kontrolle über das Raster zu haben Struktur:

 display: Grid;<br> Grid-Template-Columns: Repeat(Auto-Fit, minmax(200px, 1fr)); // definiert die Anzahl der Spalten<br> Lücke: 10px; // definiert die Lücke zwischen Rasterelementen<br>}<p>.square {<br>background-color: #f1f1f1;<br>text-align: center;<br>padding: 20px;<br> }</p>

 <div class="square">Quadrat 1</div><br> <div> <div class="square">Quadrat 3</div>
<br>
</div>

Sowohl Flexbox als auch Grid bieten unterschiedliche Methoden zum Erstellen eines Rasters von reaktionsfähige Quadrate. Die Wahl zwischen beiden hängt von Ihren spezifischen Anforderungen und Vorlieben ab.

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