最近在工作中，遇到需要繪制網(wǎng)格線的效果，如下圖：

我嘗試用了三種方式去做，第一種方式是用linear-gradient()做的，首先，
Html:
網(wǎng)格線效果的Css:
background: -webkit-linear-gradient(top, transparent 180px, #c3c3c3 0), -webkit-linear-gradient(left, transparent 306px, #c3c3c3 0);
background-size: 307px 181px;
考慮兼容性，可以加上一些前綴：
-moz-linear-gradient、-ms-linear-gradient、-webkit-linear-gradient
瀏覽器支持如下：

-webkit-linear-gradient(top, transparent 180px, #c3c3c3 0)和-webkit-linear-gradient(left, transparent 306px, #c3c3c3 0);用意是是上面180px設(shè)置了透明的，左邊開始306px設(shè)置了透明的，然后水平方向限制只顯示307px，在垂直方向設(shè)置限制只顯示181px的范圍，加上background默認(rèn)了repeat的，那么就能到想要的網(wǎng)格線了，不過(guò)此次我需要做的效果不能用這個(gè)，因?yàn)檫@里設(shè)置了固定的值，意味了網(wǎng)格的大小固定了，下面兩種方式可以得到根據(jù)屏幕大小變化，網(wǎng)格數(shù)不變而自適應(yīng)的網(wǎng)格。
第二種方式需要在div. grid里面添加多個(gè)span，一個(gè)span代表一個(gè)網(wǎng)格，用grid布局做，grid-gap是設(shè)置網(wǎng)格布局中列和行之間的間距大小，grid-template-columns是設(shè)置網(wǎng)格布局中的列寬，grid-template-rows是設(shè)置網(wǎng)格布局中的行高，用網(wǎng)格布局做這個(gè)網(wǎng)格線，需要在div.grid的子級(jí)設(shè)置邊框。

Css:
.grid{
width: 100vw;
   height: 100vh;
   grid-template-columns: auto auto auto auto auto;
   grid-template-rows: auto auto auto auto;
   display: grid;
   grid-gap: 0;
}
 
.grid span{
opacity: 0.25;
border: #FFFFFF solid 1px;
margin-left: -1px;
    margin-top: -1px;
}
不過(guò)整個(gè)容器最外邊我不需要有邊框，于是我選擇了用第三種方式做。第三種也是需要在div. grid里面添加多個(gè)span，一個(gè)span代表一條線，然后，布滿屏幕的網(wǎng)格就是由一條一條線組成，例如：上面需要做的效果，就是四行五列，需要7條線，那么設(shè)置7個(gè)span，前面四個(gè)span的代表的是四條豎線，后三個(gè)是三條橫線，然后設(shè)置如下的樣式就能得到想要的效果。
Css:
.grid{
position: absolute;
left: 0;
top: 0;
width: 100vw;
    height: 100vh;
z-index: 1;
pointer-events: none;
}
grid span{
    display: block;
    position: absolute;
    background: rgba(255,255,255,0.25);
}
.grid span:nth-child(1), .grid span:nth-child(2), .grid span:nth-child(3), .grid span:nth-child(4){
    bottom: 0;
    width: 1px;
    height: 100%;
}
.grid span:nth-child(1){
    left: calc(20% - .5px);
}
.grid span:nth-child(2){
    left: calc(40% - .5px);
}
.grid span:nth-child(3){
    left: calc(60% - .5px);
}
.grid span:nth-child(4){
    left: calc(80% - .5px);
}
.grid span:nth-child(n+5) {
    left: 0;
    height: 1px;
    width: 100%;
}
.grid span:nth-child(5) {
    top: calc(1 * 25vh - .5px);
}
.grid span:nth-child(6) {
    top: calc(2 * 25vh - .5px);
}
.grid span:nth-child(7) {
    top: calc(3 * 25vh - .5px);
}