如何制作像预览图一样的scss网格？

Question

我正在尝试创建一个 SCSS 网格，如下图所示。问题是计算第二列和第三列。你知道如何实现这一目标吗？

感谢您的任何提示和帮助！

Answer 1

尝试使用单独的类来制作每一行

.a {
position: absolute;
top: 50%;
left: 50%;
 width: 2px;
 height: 100px;
 background: black;
}

.b {
position: absolute;
top: 50%;
left: 80%;
 width: 2px;
 height: 100px;
 background: black;
}

.c {
position: absolute;
top: 50%;
left: 50%;
 width: 160px;
 height: 2px;
 background: black;
}

.d {
position: absolute;
top: 50%;
left: 40%;
 width: 2px;
 height: 100px;
 background: black;
}

.e {
position: absolute;
top: 50%;
left: 60%;
 width: 2px;
 height: 100px;
 background: black;
}

.ab
{
position: absolute;
top: 55%;
left: 52%;
font-size: 10px;
}

<div class="a"></div>

<div class="ab">EXAMPLE</div>

<div class="b"></div>

<div class="c"div>

<div class="d"></div>

<div class="e"></div>

我知道它很粗糙，但它也可能会有所帮助，您可以使用检查元素实时更改代码位置，这样可能会有所帮助