CODEWITHSUNDEEP
htmlcssgridborder
Sarah
Sarah

Reputation: 97

creating lines between grid boxes using css only

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 enter image description here 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;
    }
  
}

Upvotes: 0

Views: 1472

Answers (2)

A Haworth
A Haworth

Reputation: 36426

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:

enter image description here

Upvotes: 1

paulo77
paulo77

Reputation: 174

I wouldn't use a psuedo element ::after for the lines, you need more control. I would use specific HTML element.

Things I've done in the code:

  • added a .block-item-wrapper to each .block-item to hold the dashed line
  • added the .dashed-line element in the parent .block-item-wrapper and given it a dashed bottom border
  • given the .dashed-line a calcuated value of top: calc(50% - 6px);. The 6px factors in the rendering of the font-size property of the text, so the dashed line is level with the middle of the text. You'll need to change this depending on the font you chose and how its size is rendered.
  • given the .block-item a higher z-index so it sits above the line
  • used an nth-child selector to remove the dashed line on the 1st / 4th etc items

You'll need to set a max-width: value on the grid itself as well at some point.

Codepen Link:

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

Upvotes: 1

Related Questions