使用linear-gradient实现纯css画网格背景

grid-background.scss

.grid-bg {
    border-radius: 2px;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background-image: linear-gradient(to right, #e5e5e5 1px, transparent 1px), linear-gradient(#e5e5e5 1px, transparent 1px);
    background-size: calc(8.333333%) var(--cell-height, 84px);
}

.grid-bg {
  margin: 0 auto;
  width: 800px;
  height: 600px;
  background-color: #fff;
  background-image:
    linear-gradient(to right, #00aaf2 1px, transparent 1px),
    linear-gradient(to bottom, #00aaf2 1px, transparent 1px);
  background-size: 20px 20px;
  border-right: 1px solid #00aaf2;
  border-bottom: 1px solid #00aaf2;
}

/*
to right 的linear-gradient画从左到右的竖线
默认 to down 的linea-gradient画从上到下的横线
background-size规定每个小背景的大小
默认 background-repeat就构成了网格

可以使用deepseek问 如何使用纯css实现网格背景
*/