Wie kann ich dafür sorgen, dass die Elemente der letzten Zeile des CSS-Rasters den verfügbaren Platz gleichmäßig ausfüllen?

Erzwinge, dass Elemente in der letzten Zeile des Rasters den Platz ausfüllen

Um Elemente unabhängig von der Anzahl gleichmäßig in der letzten Zeile eines CSS-Rasters zu verteilen Betrachten Sie bei der Anzahl der Elemente den folgenden Ansatz:

Die Herausforderung besteht darin, die Anzahl der Elemente im Raster zu bestimmen, um deren Layout zu manipulieren. Da dies möglicherweise nicht im Voraus bekannt ist, bietet CSS eine Lösung mit den Selektoren „nth-child“ und „nth-last-of-type“. So funktioniert es:

1. Elemente der letzten Zeile identifizieren: Verwenden Sie nth-last-of-type, um die Elemente der letzten Zeile auszuwählen. Beispiel: Raster > *:nth-last-of-type(1) zielt auf alle Elemente in der letzten Zeile ab.
2. Elemente am linken Ende verteilen: Um das Element ganz links zu zentrieren, verwenden Sie justify-self: center . Verwenden Sie für das zweite Element justify-self: end, um es rechts auszurichten. Diese Stile können auf jedes dritte Element angewendet werden (z. B. Grid > *:nth-child(3n-1) und Grid > *:nth-child(3n-2)).
3. Spanne des letzten Elements anpassen: Für die letzten Elemente in der Zeile möchten wir, dass sie den gesamten verbleibenden Platz abdecken. Verwenden Sie dazu „grid-column: span 2“ oder „grid-column: span 3“, abhängig von der Anzahl der Spalten im Raster (z. B. wäre es für ein dreispaltiges Raster „grid > *:nth-child(3n“) -1):nth-last-of-type(1) { grid-column: span 2; }).

Durch die Kombination dieser Techniken können Sie dies sicherstellen Alle Elemente in der letzten Zeile Ihres Rasters verbrauchen den verfügbaren Platz gleichmäßig, unabhängig von ihrer Anzahl.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass die Elemente der letzten Zeile des CSS-Rasters den verfügbaren Platz gleichmäßig ausfüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!