css - 绘制始终具有开始线和结束线的 CSS 网格线

Question

在 CSS 中绘制垂直/水平线，因此无论参数（网格大小、线宽、视口方面）如何，总会有第一行和最后一行可见。

代码

html, body{ height: 100% }
body {
  --thickness: 5px;
  --grid: 10; 
  
  background-image: linear-gradient(0deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg, red var(--thickness), transparent 0);
  
  background-size: calc(100/var(--grid)*1%) calc(100/var(--grid)*1%);
}

Codepen游乐场

标签： csslinear-gradients

Answer 1

您需要考虑最后一行的线条粗细。所以每个图块宽度的计算是：(width of the box - thickness) / number of tiles，和高度相似，显然。

html, body{ height: 100% }
body {
  display: flex;
}
.foo {
  box-shadow: 0 0 0 12px #EEE;
  width: 313px;
  height: 167px;

  margin: auto;
  --thickness: 5px;
  --grid: 9; 

  background-image: linear-gradient(180deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg, red var(--thickness), transparent 0);
  
  background-size: calc((100% - var(--thickness))/var(--grid)) calc((100% - var(--thickness))/var(--grid));
}

<div class="foo"></div>