css3 绘制网格线 |css id获取

/*CSS代码*/
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
.grid-item {
background-color: #EAEAEA;
border: 1px solid #CCC;
padding: 10px;
font-size: 14px;
}

首先，大家需要在HTML文件中创建一个容器元素，这样大家才能在其内部使用网格布局。在上面的CSS代码中，大家使用了.grid选择器来定义一个网格容器，并设置了它的列数、行数和列与行之间的间隙。这里大家设置列数为4列，每列的宽度为1fr；行数为3行，每行的高度为100px；间隙为10px。

接下来，大家在网格容器中添加各个子元素，也就是大家要显示网格线的区域。在上面的CSS代码中，大家使用了.grid-item选择器来定义每个网格子项的样式。这里大家设置了子元素的背景颜色，边框颜色和样式，内边距和字体大小。

最后，大家来运行一下上面的代码，看看实际效果。你会发现，在网格容器中每个子元素之间都有了一条细小的网格线。如果你需要更加粗细、不同颜色的网格线，可以根据自己的需求修改CSS代码。