css Grid 實現列頂部對齊的技巧
在使用 CSS Grid 布局時，如何讓多列內容從頂部開始對齊，而不是默認的從左到右填充？本文將詳細講解一種解決方案。
假設我們有以下 html 結構，包含多個
元素：
<div class="fruit-grid"> <div class="fruit">hello1</div> <div class="fruit">hello2</div> <div class="fruit">hello3</div> <div class="fruit">hello4</div> <div class="fruit">hello5</div> <div class="fruit">hello6</div> <div class="fruit">hello7</div> </div>
目標是將這些元素分成三列，每列從上到下排列，實現如下布局：
1 3 6 2 4 7 5
然而，默認的 Grid 布局可能會導致元素從左到右填充，而非頂部對齊。為了解決這個問題，我們需要結合 grid-template-columns 和 grid-auto-flow: dense 屬性。
立即學習“前端免費學習筆記（深入）”；
以下 CSS 代碼展示了如何實現頂部對齊：
.fruit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; grid-auto-flow: dense; } .fruit { width: 100%; margin-bottom: 10px; } .fruit:nth-child(1), .fruit:nth-child(2) { grid-column: 1; } .fruit:nth-child(3), .fruit:nth-child(4), .fruit:nth-child(5) { grid-column: 2; } .fruit:nth-child(6), .fruit:nth-child(7) { grid-column: 3; }
grid-template-columns: repeat(3, 1fr) 定義了三列，每列寬度相等。align-items: start 確保項目從容器的頂部開始對齊。 關鍵在于 grid-auto-flow: dense;，它指示 Grid 布局引擎盡可能緊湊地填充網格單元格，從而實現頂部對齊的效果。 如果沒有 grid-auto-flow: dense;，Grid 會按照默認的從左到右填充順序排列元素。 最后，nth-child 選擇器用于指定每個元素所在的列。
通過以上方法，我們可以輕松地使用 CSS Grid 創建列頂部對齊的布局。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
