仅使用 css 在网格框之间创建线条

Question

我正在尝试实现与此类似的东西

An interesting Javascript task

我尝试了答案，但似乎没有出现这条线。

我真正想要达到的目标网格框之间有横线和竖线。这就是我的代码的样子 HTML

<section class="block-map">
    <div class="bound-layout">
        <div class="block_grid">
            {% for item in items %}
            
            <div class="block_item">
                <p class="need"><span class="bg"><span class="icon">{{ item.description|raw }}</span></span></p>
            </div>
            {% endfor %}
           
        </div>
    </div>
</section>

CSS

.block-map {
     .block_grid {
      display: grid;
      grid-template-columns: auto auto auto;
      padding: 10px;
      column-gap: 30px;
      row-gap: 30px;
    }
    .block_item {
      background-color: #F5F5F5;
      border-bottom: 5px solid #5B8726;
      padding: 20px;
      font-size: 30px;
      text-align: left;
      width:338px;
      height: 149px;
      align-items: center;
      display: grid;
    }
    p.need {
        color:@grey;
        font-size:16px;
        font-family: @serif;
        font-weight: 700;
        
    }
    
    .block_grid .bg::after {
      
      letter-spacing: 20px; /* adjust this to control the blue line length */
      font-size: 25px;
      border-bottom: 2px solid blue;
      vertical-align: top;
    }
  
}

Answer 1

我不会为线条使用伪元素 ::after，您需要更多控制。我会使用特定的 HTML 元素。

我在代码中所做的事情：

为每个 .block-item 添加了一个 .block-item-wrapper 以保持虚线
在父级 .block-item-wrapper 中添加了 .dashed-line 元素并给它一个虚线底边框
给定 .dashed-line 的计算值 top: calc(50% - 6px);。文本 font-size 属性渲染中的 6px 因素，因此虚线与文本中间水平。您需要根据您选择的字体及其大小的呈现方式来更改它。
鉴于 .block-item 更高 z-index 所以它位于线上方
使用 nth-child 选择器删除第 1 / 4 等项上的虚线

您有时还需要在网格本身上设置一个 max-width: 值。

Codepen Link:

https://codepen.io/thechewy/pen/VwQxQWe

Answer 2

由于线条是一种视觉线索，因此可以使用每个网格项目上的伪前后元素绘制它们。

垂直线是使用 before 伪元素绘制的，位于每个网格项目的顶部和中间。顶行中的网格项将其行设置为显示：none.

水平线是使用 after 伪元素绘制的，位于项目下方的右侧。行末尾的项目（即每第 3 个项目）的行设置为显示：none.

使用线性渐变的重复背景图像将线条设为虚线。

这是一个简单的例子。显然，您需要更改尺寸以满足您的特定要求。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  --g: 3vw;
  grid-gap: var(--g);
}

.grid>* {
  width: 100%;
  aspect-ratio: 2 / 1;
  border: solid 1px gray;
  background: lightgray;
  position: relative;
}

.grid>*::before {
  content: '';
  height: var(--g);
  width: 2px;
  background-image: linear-gradient(gray 0 50%, transparent 50% 100%);
  background-size: auto calc(var(--g) / 4);
  position: absolute;
  z-index: -1;
  bottom: 100%;
  left: 50%;
}

.grid>*:nth-child(1)::before,
.grid>*:nth-child(2)::before,
.grid>*:nth-child(3)::before {
  display: none;
}

.grid>*::after {
  content: '';
  width: var(--g);
  height: 2px;
  background-image: linear-gradient(to right, transparent 0 50%, gray 50% 100%);
  background-size: calc(var(--g) / 4);
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 100%;
}

.grid>*:nth-child(3n)::after,
.grid>*:last-child::after {
  display: none;
  ;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

这会产生这样的结果：

仅使用 css 在网格框之间创建线条

creating lines between grid boxes using css only

html

css

grid

border