如何使用 CSS Grid 實現先列后行且行數自動調整的布局？

css Grid 實現先列后行布局，行數自動調整

網頁布局設計中，靈活排列元素至關重要。 假設我們有一組 div 元素，需要以三列布局排列，且行數根據元素數量自動調整。例如，11 個元素的布局如下：

1 5 9 2 6 10 3 7 11 4 8

而 8 個元素的布局則為：

1 4 7 2 5 8 3 6

如何利用 CSS Grid 實現這種先列后行，行數自動調整的布局呢？

CSS Grid 實現方案

關鍵在于 CSS Grid 的 grid-auto-flow 屬性。該屬性控制網格的自動填充方向。默認值為 row（按行填充），我們需要將其設置為 column（按列填充）。

立即學習“前端免費學習筆記（深入）”；

以下 CSS 代碼實現了所需布局：

.container {   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-auto-flow: column; }

代碼解釋：

• display: grid;: 將容器設置為網格布局。
• grid-template-columns: repeat(3, 1fr);: 定義三個等寬列。 1fr 表示每個列占據可用空間的相等比例。
• grid-auto-flow: column;: 設置網格自動填充方向為列方向。

有了這段 CSS，網格會根據元素數量自動調整行數，完美實現預期布局。

其他可選方案

除了 CSS Grid，Flexbox 或 JavaScript 動態生成布局也是可行的方案。然而，對于這種場景，CSS Grid 提供了更簡潔高效的解決方案，因此更值得推薦。

通過以上方法，輕松實現先列后行且行數自動調整的布局。