creating lines between grid boxes using css only

Question

I am trying to achieve something similar to this

An interesting Javascript task

Ive attempted the answers but the line doesnt seem to be showing up.

What i am truly trying to achieve There are lines between the grid boxes, horizontally and vertically. This is what my code looks like 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

As the lines are sort of visual clues they can be drawn using pseudo before and after elements on each of the grid items.

The vertical lines are drawn using before pseudo elements positioned a the top and half way along each grid item. The grid items in the top row have their lines set to display: none.

The horizontal lines are drawn using after pseudo elements positioned at the right hand side half way down the item. The items at the end of the rows (ie every 3rd item) have their lines set to display: none.

The lines are made dashed by using a repeating background image which is a linear gradient.

Here is a simple example. Obviously you will want to change the dimensions to fit your particular requirements.

.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>

This produces this result: