近来在事情中，碰到需要绘制网格线的结果，以下图：

我考试考试用了三种方式去做，第一种方式是用linear-gradient()做的，起首，
Html:
网格线结果的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设置了通明的，左侧下手下手306px设置了通明的，然后水平标的目的限制只显露307px，在垂直标的目的设置限制只显露181px的规模，加上background默许了repeat的，那末就能到想要的网格线了，不外此次我需要做的结果不克不及用这个，因为这里设置了牢固的值，意味了网格的巨细牢固了，下面两种方式能够失掉凭据屏幕巨细改变，网格数稳定而自适应的网格。
第二种方式需要在div. grid内里增加多个span，一个span代表一个网格，用grid布局做，grid-gap是设置网格布局中列和行之间的间距巨细，grid-template-columns是设置网格布局中的列宽，grid-template-rows是设置网格布局中的行高，用网格布局做这个网格线，需要在div.grid的子级设置边框。

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;
}
不外全部容器最外边我不需要有边框，因而我遴选了用第三种方式做。第三种也是需要在div. grid内里增加多个span，一个span代表一条线，然后，充满屏幕的网格就是由一条一条线构成，歧：下面需要做的结果，就是四行五列，需要7条线，那末设置7个span，后面四个span的代表的是四条竖线，后三个是三条横线，然后设置以下的技俩就能失掉想要的结果。
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);
}