Wie erreicht man exakt gleiche Spaltenbreiten im CSS-Raster?

Genau gleiche Spaltenbreiten im CSS-Raster

Das Erstellen gleich großer Spalten im CSS-Raster mag einfach erscheinen, erfordert jedoch einen bestimmten Ansatz. Während Flexbox mit seiner Flex-Basis-Eigenschaft eine einfache Lösung bietet, erfordert CSS Grid eine genauere Konfiguration.

Herausforderung:

Gegeben sei eine HTML-Struktur wie:

<code class="html"><div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div></code>

Das Ziel besteht darin, diese Elemente in gleichen Spalten anzuzeigen, unabhängig von der Anzahl der untergeordneten Elemente innerhalb der Zeile.

Lösung:

Das Gemeinsame Der Ansatz von „repeat(3, 1fr)“ ist unzureichend, da 1fr den verfügbaren Platz verteilt, anstatt eine strikte Spaltengleichheit zu erzwingen. In Fällen, in denen der Inhalt die Spurgröße überschreitet, wird er nicht automatisch angepasst, was möglicherweise zu ungleichmäßigen Spaltenbreiten führt.

Um genau gleiche Spaltenbreiten zu erreichen, verwenden Sie die folgende CSS-Eigenschaft:

<code class="css">grid-template-columns: repeat(3, minmax(0, 1fr));</code>

Erklärung:

minmax(0, 1fr) ermöglicht, dass die Rasterspuren so klein wie 0, aber so groß wie 1fr sind. Dadurch wird sichergestellt, dass die Spalten gleich bleiben. Seien Sie jedoch vorsichtig, da es zu Überläufen kommen kann, wenn der Inhalt größer als die Spalte ist oder wenn er nicht umbrochen werden kann.

Betrachten Sie das folgende Beispiel, um den Unterschied zu veranschaulichen:

<code class="css">.equalColumns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.minmaxEqualColumns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}</code>

equalColumns mit Wiederholung(3, 1fr):

minmaxEqualColumns mit Wiederholung(3, minmax(0, 1fr)):

Das obige ist der detaillierte Inhalt vonWie erreicht man exakt gleiche Spaltenbreiten im CSS-Raster?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!