Wie erreicht man Spalten gleicher Breite im CSS-Raster?

Spalten gleicher Breite im CSS-Raster

Flexbox hat für seine Fähigkeit, Elemente in Spalten gleicher Breite anzuzeigen, Anerkennung gefunden. Allerdings bietet CSS Grid auch flexible Layoutoptionen, was die Frage aufwirft, wie man den gleichen Effekt erzielen kann.

Die bereitgestellte HTML-Struktur enthält ein Zeilenelement mit mehreren untergeordneten Elementelementen. Das Ziel besteht darin, diese Elemente gleichmäßig über die Zeile zu verteilen, unabhängig von der Anzahl der vorhandenen Elemente.

Eine häufig vorgeschlagene Lösung für CSS Grid ist die Verwendung von „repeat(3, 1fr)“. Dadurch wird zwar teilweise der gewünschte Effekt erzielt, es kann jedoch fehlschlagen, wenn der Inhalt die Spurgröße überschreitet. Dies liegt daran, dass 1fr die Verteilung des verfügbaren Platzes angibt, was nicht in allen Fällen gleiche Spaltenbreiten garantiert.

Um eine genaue Gleichheit sicherzustellen, sollte stattdessen der folgende CSS-Code verwendet werden:

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

minmax(0, 1fr) beschränkt die Rasterspuren auf eine minimale Größe von 0 und eine maximale Größe von 1fr. Dadurch wird sichergestellt, dass alle Spalten die gleiche Breite behalten, auch wenn der Inhalt überläuft.

Hier ist ein Beispiel, um den Unterschied zwischen „repeat(3, 1fr)“ und „repeat(3, minmax(0, 1fr)“ zu veranschaulichen:

<code class="html"><div class="container">
  <div class="row" style="grid-template-columns: repeat(3, 1fr)">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>

  <div class="row" style="grid-template-columns: repeat(3, minmax(0, 1fr))">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>
</div></code>

Mit „repeat(3, 1fr)“ bricht das Überlaufelement aus seiner Spalte aus. Im Gegensatz dazu sorgt „repeat(3, minmax(0, 1fr))“ dafür, dass alle Spalten gleich bleiben und der Überlaufinhalt unten sichtbar ist.

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