How to add a vertical line between grid items?

Asked 8/5, 2020 at 9:59 Answered 29/6, 2021 at 8:32

I am currently have some troubles to add a vertical line between grid items. My current solution has empty spaces between the lines and I cannot work with borders, because a border will directly "glue" on the item and not in the middle of two items.

This code above currently looks like this:

But it should look like this:

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
}

.grid-item {
  height: 20px;
  background-color: red;
  position: relative;
}

.grid-item::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 2px;
  background: grey;
  right: -9px
}

<div id="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Uvea answered 8/5, 2020 at 9:59 Comment(5)

NO you cannot have vertical line, you can use flex if that is an option here. – Rustcolored 8/5, 2020 at 10:1

No flex wouldn't be an option here, because I need the grid-template-columns possibility with the fr unit – Showery 8/5, 2020 at 10:2

in that case you have to cheat a code, by adding some extra divs. – Rustcolored 8/5, 2020 at 10:4

Can you give me a code example, please? – Showery 8/5, 2020 at 10:4

you have an answer below, looks like he has created cheat code for you :) – Rustcolored 8/5, 2020 at 10:24

You can do this with background and easily adjust even if you change the template columns:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:linear-gradient(#000,#000) center/2px 100% no-repeat;
  grid-gap: 16px;
  margin:5px;
}

.grid-item {
  height: 20px;
  background-color: red;
  position: relative;
}


.grid-container.another {
  grid-template-columns: 2fr 1fr;
  background-position:66.5% 0;
}

.grid-container.column-3 {
  grid-template-columns: 1fr 1fr 1fr;
  background:
    linear-gradient(#000,#000) center/2px 100% no-repeat,
    linear-gradient(#000,#000) center/2px 100% no-repeat;
  background-position:33% 0, 67% 0;
}

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

<div class="grid-container another">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="grid-container column-3">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Supper answered 8/5, 2020 at 11:33 Comment(0)

You can increase the height of the pseudos in the gap amount, and set overflow:hidden on the grid to hide the pseudo of the last line

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  overflow: hidden;
}

.grid-item {
  height: 20px;
  background-color: red;
  position: relative;
}

.grid-item::after {
  content: "";
  position: absolute;
  height: calc(100% + 16px);
  width: 2px;
  background: grey;
  right: -9px
}

<div id="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Penman answered 8/5, 2020 at 11:22 Comment(0)

Here is solution code pen please refer this.

CodePen

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  position: relative;
}

.grid-item {
  height: 20px;
  background-color: red;
  position: relative;
}

.border {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: grey;
  right: -9px
}

<body>
  <div id="grid-container">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <span class="border"></span>
  </div>
</body>

Arieariel answered 8/5, 2020 at 10:12 Comment(2)

Good to know something like this, upvote for this. I have just made snippet from your code, hope that's not an issue. – Rustcolored 8/5, 2020 at 10:26

This is a solution if you have a grid column layout with exact same width. But if you have 1fr 2fr or 1fr 2fr 1fr, than it won't work :( – Showery 8/5, 2020 at 10:56

Late to the party bu I was looking for a decent solution too. I've found that :after or :before pseudo elements work perfectly fine without messing with the layout. Just add one with absolute positioning (remember to set position: relative to the container) and you're done.

Amaleta answered 1/11, 2020 at 17:55 Comment(0)

-1

A solution that will work for any number of columns.

The example here is for 2 columns, but you can change the number of columns in the grid-template-columns property and set the 'sep' class accordingly in the items, those with 'sep' class will have a vertical line on their left side.

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* currently 2, change to any number of columns */
  grid-row-gap: 20px;  
}

.item {
  height: 40px;
  background: orange;
  display: flex;
}

.sep:before {
  content: '';
  height: 40px;
  position: relative;
  border-left: 1px solid black;
}

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

Colour answered 29/6, 2021 at 8:32 Comment(0)

Recommended topics

Hot tags