CSS grid 布局如何添加分隔線?
分享一些超級實用的布局小技巧。
平時開發過程中會碰到各式各樣的布局，如下是一個7* N的網格布局，不過每一行還有一條分隔線。
image-20250419142949987
這種布局該如何實現呢？
一、grid 布局結構與局限
這里的內容都是后端返回的，通常是一個完整的一維數組。
const list =[
{...},
{...},
//...
]眾所周知，grid是二維布局，可以在扁平dom結構下直接實現網格布局。
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
...
</div>然后設置grid樣式：
.grid{
display: grid;
grid-template-columns:repeat(7,1fr);
width:300px;
padding:10px;
border:1px solid #ccc;
border-radius:5px;
margin:20px auto;
}效果如下，很方便就實現一個網格布局。
image-20250419150527200
由于每一行還有一條單獨的分隔線，看似好像無法處理？畢竟 grid 沒有所謂的行選擇器。
這時，很多同學可能會單獨給每一行包一層，合成一個二維數組。
const grouplist =[
[{...},{...},{...},{...},{...},{...},{...}],// 每一行7個
//...
]自然dom結構也需要包裹一層，然后給每一行單獨樣式。
<div class="list">
<div class="col"><!--設置樣式-->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="col"> ...</div>
</div>雖然也能實現，但還是有些繁瑣，也不夠優雅。
那么，有沒有辦法在不嵌套的情況實現分隔線呢？
二、使用漸變實現
我們可以直接繪制重復平鋪的漸變，原理其實也很簡單。
假設每一行的高度固定為--size，那么我們需要繪制一條從透明到實色的漸變，線條的高度是1px，然后背景尺寸是--size，這樣漸變就會自動平鋪，形成我們所需的網格線效果，原理如下：
image-20250425193050298
用代碼實現就是：
.grid{
/**/
--size:54px;
background:linear-gradient(transparent0calc(var(--size)-1px),red)01px/100%var(--size);
}效果是這樣的：
image-20250425193448881
看著好像和每一行沒對齊？
其實是因為我們設置了padding，漸變會默認從padding-box開始平鋪，也就是起始點是從內邊距開始的，所以我們要改變一下，讓他從內容盒子開始。
.grid{
background-origin: content-box;
}效果如下：
image-20250425193710051
對齊了，但是上下多了兩條，有沒有什么辦法去掉呢？
還是盒子的問題，漸變默認會充滿padding-box，也需要改一下。
.grid{
background-clip: content-box;
}這樣上右左，只要在padding區域的漸變都被裁剪了，不過地下還是有一條線。
image-20250425193934087
因為剛好處于平鋪的最下方，仍然位于content-box內，所以沒有被裁掉，那有沒有辦法去掉呢?
其實將整個容器的高度減少1個像素就可以讓下方的線條出去了，不過試了幾種方式都不能很好解決，沒辦法，我們將這層背景繪制在一個單獨的偽元素上，使用偽元素可以方便的控制尺寸，也無需改變padding-box了。
.grid::before{
content:'';
position: absolute;
inset:10px10px11px;/*底部多一像素*/
background:linear-gradient(transparent0calc(var(-- size)-1px),red)00/100%var(--size);
pointer-events: none;
}這樣就完美實現了。
image-20250425200529835
你也可以訪問在線demo真實體驗：https://codepen.io/xboxyan/pen/azzWGYM[1]。
不過這種方式要求每一行高度是固定，提前算好的，如果每一行的高度會發生變化就不適用了。
三、用上下border實現
我們可以給每個子元素設置上邊框來實現分隔線效果。
.grid-item{
border-top:1px solid #ccc
}缺點很明顯，第一行是多余的，而且當最后一行不足時，邊框就斷開了，效果如下：
image-20250419151636163
我們可以換個方向，用下邊框實現。
.grid-item{
border-bottom:1px solid #ccc
}稍微好點了，只是最后一行有點多余，效果如下：
image-20250419151952511
如何把最后的尾巴去掉呢？也就是如何選中grid布局的最后一行?
這里可以一一列舉，比如當最后一行只有一個元素時（其實是「最后一個元素并且是每一行的第一個，需同時滿足」）。
.grid-item:last-child:nth-child(7n+1){
border: none
}同時滿足這兩個條件即可確定是最后一行的第一個， 示意如下：
image-20250421101716395
然后是最后一行只有兩個元素（「倒數第二個元素并且是每一行的第一個」）。
.grid-item:nth-last-child(2):nth-child(7n+1),
.grid-item:nth-last-child(2):nth-child(7n+1)~.grid-item{
border: none
}示意如下：
image-20250421101909227
依次類推，完整選擇器代碼是：
/*1*/
.grid-item:last-child:nth-child(7n+1),
/*2*/
.grid-item:nth-last-child(2):nth-child(7n+1),
.grid-item:nth-last-child(2):nth-child(7n+1)~.grid-item,
/*3*/
.grid-item:nth-last-child(3):nth-child(7n+1),
.grid-item:nth-last-child(3):nth-child(7n+1)~.grid-item,
/*4*/
.grid-item:nth-last-child(4):nth-child(7n+1),
.grid-item:nth-last-child(4):nth-child(7n+1)~.grid-item,
/*5*/
.grid-item:nth-last-child(5):nth-child(7n+1),
.grid-item:nth-last-child(5):nth-child(7n+1)~.grid-item,
/*6*/
.grid-item:nth-last-child(6):nth-child(7n+1),
.grid-item:nth-last-child(6):nth-child(7n+1)~.grid-item,
/*7*/
.grid-item:nth-last-child(7):nth-child(7n+1),
.grid-item:nth-last-child(7):nth-child(7n+1)~.grid-item{
border:0;
}這樣就能選中最后一行行了，雖然看著很多（別急，后面還有其他方案），但是效果很不錯。
image-20250419154146111
還有其他情況也表現完美。
image-20250419154215435
你也可以訪問在線demo真實體驗：https://codepen.io/xboxyan/pen/PwwqLXM[2]。
四、借助偽元素實現
上面雖然能夠實現，也非常靈活，如果僅僅是實現分隔線，其實還有另外更巧妙的方案。
還是前面的結構，我們可以給每一行的第一個元素添加一個偽元素，用偽元素實現分隔線。
.grid-item:nth-child(7n+1)::before{
content:'';
display: block;
height:1px;
background-color:#ccc;
}效果如下：
image-20250419160711227
看著好像相差甚遠？沒關系，我們可以使用絕對定位，需要注意的是，我們需要讓偽元素貫穿整行，所以要給外層添加相對定位。
.grid{
position: relative;
}
.grid-item:nth-child(7n+1)::after{
content:'';
position: absolute;
left:10px;/*只設置水平方向定位*/
right:10px;
height:1px;
background-color:#ccc;
}注意這里只設置了水平方向上的定位（left和right），垂直方向上仍然保持原位，我稱之為「不完全絕對定位」，效果如下：
image-20250419160947752
由于不能使用垂直方向定位，這里就用transform實現，然后可以用:not排除掉第一行的元素，具體實現如下：
.grid-item:nth-child(7n+1):not(:first-child)::after{
/*...*/
transform:translateY(-15px);
}效果就很完美了，實現也比較簡單。
image-20250419161739021
你也可以訪問在線demo真實體驗：https://codepen.io/xboxyan/pen/dPPoLYa[3]
四、總結一下
以上就本文的全部內容了，非常實用的布局小技巧，其實都是選擇器的實際運用，你學會了嗎？下面總結一下：
grid布局無法直接選擇行- 嵌套的方式實現分隔線有些繁瑣，不夠優雅
- 漸變可以很方便的實現平鋪的線條
- 默認情況下，漸變會從
padding-box開始平鋪，也會充滿整個padding-box - 使用偽元素可以方便的控制尺寸，可以無需改變
padding-box來控制漸變的起始點，也能控制漸變的平鋪區域 grid布局最后一行可以一一列舉處理，比如當最后一行只有一個元素時其實是「最后一個元素并且是每一行的第一個」- 最后一行只有兩個元素的條件是「倒數第二個元素并且是每一行的第一個」
- 還可以借助偽元素的不完全絕對定位貫穿整行
