正常情況下，網頁中的列表都是從左到右，從上到下的，如下：

但有時候可能需要從上到下，從左到右的排列方式，就像這樣。

其實這種排序更符合日常生活中的排列方式。

雖然在網頁中不常見，但如果真的碰到了這種布局，該如何處理呢？

有些同學可能會想到用 JS將元素數(shù)組分成三份，做成一個二維數(shù)組，然后每個數(shù)組嵌套一層容器水平排列就行了。其實呢，純 CSS 也是可以完成的，一起來看看吧。

一、grid 布局

很多同學很自然會想到grid布局。沒錯，grid也能實現(xiàn)這樣的效果，不過有些局限性。

簡單寫一下頁面結構，HTML如下：

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
	...很多子元素
</div>

簡單修飾一下。

.list{
  width: 400px;
  outline: 3px solid #3E65FF;
  padding: 8px;
  counter-reset: num;
}
.item{
  text-align: center;
  color: #fff;
  /*  */
  counter-increment: num;
}
.item::before{
  content: counter(num);
  display: block;
  line-height: 30px;
  background-color: #3E65FF;
}

我們這里通過計數(shù)器來顯示編號，效果如下：

現(xiàn)在用grid布局來實現(xiàn)3*N的排列。

.list{
  /**/
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

效果如下：

這就是正常的、一般見到的網格布局了。

如何改成從上到下、從左到右的方式呢？這里要用到grid-auto-flow，也就是改變網格的排列方式。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-flow。

由于是縱向排列，所以得知道縱向一共有多少格，因此需要規(guī)定一下縱向的規(guī)則。

.list{
  /**/
  grid-auto-flow: column;
  grid-template-rows: repeat(8, 1fr);
}

這樣就分成了N*8的網格，效果如下：

二、grid布局的小問題

不過這種實現(xiàn)還有點問題，當子項比較少時，可能會這樣。

其實也不算問題，如果你剛好就是需要這樣的效果的話。那么，如何才能在這種情況下也能自動改變縱向的數(shù)量，讓整個表格盡可能等分呢？

純 CSS暫時還沒想到好辦法，只能借助JS來計算了。由于一般都是在框架里，所以這種計算也比較方便。我們可以用 CSS變量來動態(tài)渲染，下面是vue中的寫法。

<div :style="--n: Math.ceil(list.length / 3)">
  
</div>

然后再CSS中使用這個變量。

.list{
  /**/
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--n), 1fr);
}

這樣就能動態(tài)排列了。

你可以訪問以下鏈接查看真實效果

• CSS columns grid (codepen.io)[1]
• CSS columns grid (juejin.cn)[2]

三、columns 布局

沒錯我們這里又要用上這個不起眼的columns 布局。

回到這里，這種從上到下，從左到右不正好就是 columns 擅長的嗎？

比如默認布局是這樣的。

我們只需要加上分欄數(shù)量就可以了。

.list{
  column-count: 3; /* 分欄數(shù)量 */
}

無需任何其他規(guī)范，效果就出來了。

還可以通過column-gap來設置分欄的間隔。

.list{
  /**/
  column-gap: 8px; /* 分欄間隔 */
}

這樣就實現(xiàn)了我們想要的效果了，而且不論數(shù)量多少，都能自動等分。

是不是非常簡單呢？你可以訪問以下鏈接查看真實效果

• CSS columns grid (codepen.io)[3]
• CSS columns grid (juejin.cn)[4]

四、總結一下

一個非常實用的布局小技巧，你學到了嗎？下面總結一下。

• 正常網頁中的列表都是從左到右，從上到下的，但有時候也會碰到從上到下，從左到右的。
• grid布局可以實現(xiàn)m*n的網格布局。
• grid布局可以通過grid-auto-flow，改變網格的排列方式。
• grid布局無法自動改變縱向的數(shù)量，讓整個表格盡可能等分，需要借助一點點JS。
• columns 布局可以直接實現(xiàn)從上到下，從左到右的布局。

[1]CSS columns grid (codepen.io)： https://codepen.io/xboxyan/pen/dyEGprP。

[2]CSS columns grid (juejin.cn)： https://code.juejin.cn/pen/7370229755154530356。

[3]CSS columns grid (codepen.io)： https://codepen.io/xboxyan/pen/KKLVgOR。

[4]CSS columns grid (juejin.cn)： https://code.juejin.cn/pen/7370233304550752293。