So füllen Sie Elemente in Spalten im CSS-Rasterlayout

Angenommen, wir haben n Elemente und müssen diese Elemente in einem Rasterlayout in Spalten sortieren. Die Anzahl der Spalten ist festgelegt und wir müssen außerdem sicherstellen, dass das Rasterlayout eine Mindestanzahl von Zeilen enthält, um das Raster effizient zu füllen. In diesem Artikel behandle ich Zahlen als Elemente. Und ordnen Sie die Zahlen zwischen 1-13 im Rasterlayout entsprechend unseren Anforderungen an. Die Spaltenanzahl ist fest auf drei eingestellt. Ich werde dies mit React und SCSS (Sassy CSS) demonstrieren.

1. Wenn Sie es in Reihen anordnen müssen, ist es sehr einfach. Sie können CSS verwenden, der Code lautet wie folgt:

Der vollständige Code, einschließlich des CSS-Teils, lautet wie folgt:

Ausgabeeffekt

Wie Sie sehen, sind die Zahlen in Zeilen angeordnet. Hier fließen Rasterelemente horizontal und erstellen bei Bedarf automatisch neue Zeilen. Wenn der Fluss der Rasterelemente das Ende einer Spalte erreicht, wird eine neue Zeile erstellt. Dies wird auch als zeilenorientierte Sortierung bezeichnet, da mit der nächsten Zeile erst begonnen wird, wenn die vorherige Zeile vollständig gefüllt ist.

Unsere Anforderung besteht jedoch darin, Elemente in Spalten anzuordnen. Um Elemente in Spalten anzuordnen, müssen wir also die Anzahl der Zeilen im Rasterlayout kennen. Ich kann erklären, warum Sie die Anzahl der Zeilen kennen müssen. Bei einer zeilenweisen Anordnung wird mit der nächsten Zeile erst begonnen, wenn die vorherige Zeile vollständig gefüllt ist (d. h., die Anzahl der Elemente in der vorherigen Zeile entspricht der Anzahl der Spalten).

Ähnlich verhält es sich bei einer spaltenweisen Anordnung: Eine neue Spalte wird erst dann begonnen, wenn die vorherige Spalte vollständig ausgefüllt ist (d. h., wenn die Anzahl der Elemente in der vorherigen Spalte der Anzahl der Zeilen entspricht). Daher müssen wir wissen, wie viele Zeilen es gibt. Die Frage ist also: Wie können wir die Anzahl der Zeilen ermitteln, die im Rasterlayout erstellt werden sollen? Wir können dies mithilfe einfacher Mathematik herausfinden ... Wir kennen jetzt die Anzahl der Rasterelemente und auch die Anzahl der Spalten. Daher können wir diese Formel Math.ceil(itemsCount/columnsCount) verwenden, um die Anzahl der Zeilen zu minimieren. Warum müssen wir die Anzahl der Zeilen minimieren? Weil, wenn wir eine größere zufällige Ganzzahl als Anzahl der Zeilen verwenden, das Raster nicht effektiv gefüllt wird und einige Raster im gesamten Layout nicht gefüllt werden. Der folgende CSS-Code ist in Spalten angeordnet, und da wir das Feld „grid-template-rows“ dynamisch festlegen müssen, existiert das Feld im folgenden Code nicht:

Der vollständige Code, einschließlich des CSS-Teils, lautet wie folgt:

Sie können sehen, dass in Zeile 16 die Anzahl der Zeilen berechnet wird. In Zeile 17 wird das Feld „Grid-Template-Rows“ dynamisch festgelegt.

Hier erkennt man, dass die Zahlen in Spalten angeordnet sind, mit einer festen Spaltenanzahl (3). Auch hier beträgt die minimierte Zeilenanzahl fünf. Bei weniger als fünf Reihen kann keine Sortierung vorgenommen werden. Und wenn die Zeilenanzahl größer als fünf ist, entstehen im Layout nicht ausgefüllte Leerstellen. Eine Spalte wird erst dann gestartet, wenn die vorherige Spalte vollständig gefüllt ist.

Abschluss

Mit diesem Trick lässt sich das Problem ganz einfach lösen, indem die Anzahl der im Rasterlayout zu erstellenden Zeilen berechnet und dynamisch festgelegt wird. Da wir die Anzahl der in Spalten anzuordnenden Zeilen kennen müssen, können wir sagen, dass beim Anordnen der Elemente zur Lösung dieses Problems sowohl die Anzahl der Zeilen als auch die Anzahl der Spalten bekannt sein müssen. Hinweis: Wenn die Breite des Layouts (nicht die Anzahl der Spalten) festgelegt ist, kann dieselbe Art von Lösung verwendet werden.

Dies ist das Ende dieses Artikels zum Ausfüllen von Elementen in Spalten im CSS-Rasterlayout. Weitere Informationen zum Ausfüllen von Elementen im CSS-Rasterlayout finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!