如何在CSS網格布局中的列中填充項目
假設我們有n 個項目，并且我們必須在網格布局中將這些項目按列排序。列數是固定的，我們還必須確保網格布局中的行數最少，以便有效填充網格。在本文中，我把數字視為項目。并且根據我們的要求在網格布局中排列1-13之間的數字。列數固定為三。我將使用 React和SCSS(Sassy CSS)對此進行演示。
如果必須按行排列，那將是非常簡單的。用CSS就可以了，代碼如下所示：
完整的代碼，包括CSS部分，如下所示：
輸出效果：
如你所見，數字按行排列。在這里，網格項目沿水平方向流動，并根據需要自動創建新行。當網格項目流達到列尾時，將創建一個新行。這也稱為行優先排列，因為只有在前一行完全填滿時才開始下一行。
但是我們的要求是按列安排項目，所以為了按列排列項目，我們需要知道網格布局中的行數。我可以解釋為什么要需要知道行數。在逐行排列中，僅當前一行完全填滿時(即，前一行中的項目數已等于列數)，才開始下一行。
類似地，在逐列排列中，只有當前一列完全填滿時(即，前一列中的項目數已等于行數)，新列才開始。因此，我們需要知道行數有多少。那么問題來了，我們如何才能知道網格布局中要進行的行數呢?可以通過基本的數學學出來.....。我們現在知道了網格項目的數量，也知道列數。因此，我們要進行行數最小化可以運用此公式Math.ceil(itemsCount/columnsCount)，為什么要最小化行數，因為如果我們采用更大的隨機整數作為行數，那么網格將無法有效填充，整個布局中會有一些格子沒能填充上。以下CSS代碼是按列排列的，并且由于我們必須動態的設置grid-template-rows字段，因此以下代碼中不存在該字段：
完整的代碼，包括CSS部分，如下所示：
可以看到在第16行，會計算行數。在第17行，該grid-template-rows字段是動態設置的。
在這里，你可以看到數字以固定的列數(3)按列排列。同樣，最小化的行數為五。如果行數少于五，則無法進行排列。并且如果行數大于五，則布局中將有沒填上的空白空間。僅當前一列完全填滿時，列才開始。
結尾
這種技巧可以計算網格布局中要進行的行數并對其進行動態設置，從而非常輕松地解決了該問題。由于我們需要知道按列排列的行數，因此可以說，為解決此問題而對項目進行排列時，行數和列數都需要知道。注意：當布局的寬度(而不是列數)固定時，可以采用具有相同類型的解決方案來解決。
