如何创建等比例间距的水平网格线？

要创建等比例间距的水平网格线，我们可以使用CSS的伪元素和transform属性来实现。下面是一个示例的解决方法：

HTML代码：

<div class="grid-container">
  <div class="grid-line"></div>
  <div class="grid-line"></div>
  <div class="grid-line"></div>
  <div class="grid-line"></div>
  <div class="grid-line"></div>
</div>

CSS代码：

.grid-container {
  position: relative;
  height: 100px; /* 网格容器的高度 */
  margin: 20px auto; /* 网格容器的外边距 */
  border-top: 1px solid #000; /* 网格线的颜色和样式 */
}

.grid-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px; /* 网格线的高度 */
  background-color: #000; /* 网格线的颜色 */
  transform-origin: center; /* 以中心点为基准进行缩放 */
  transform: scaleY(0.2); /* 网格线的缩放比例 */
}

.grid-line:nth-child(1) {
  top: 20%; /* 第一条网格线距离顶部的距离 */
}

.grid-line:nth-child(2) {
  top: 40%; /* 第二条网格线距离顶部的距离 */
}

.grid-line:nth-child(3) {
  top: 60%; /* 第三条网格线距离顶部的距离 */
}

.grid-line:nth-child(4) {
  top: 80%; /* 第四条网格线距离顶部的距离 */
}

在上面的示例中，我们使用了一个div容器来包裹网格线，通过设置容器的高度和外边距来控制网格线的位置和数量。每条网格线都是一个绝对定位的div元素，通过设置它们距离顶部的位置和使用transform属性来实现等比例间距的效果。可以通过调整容器的高度和网格线的位置来实现不同的间距效果。