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