CODEWITHSUNDEEP
htmlcsscss-grid
Jan Höck
Jan Höck

Reputation: 239

How to add a vertical line between grid items?

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:

current code

But it should look like this:

enter image description here

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

Upvotes: 7

Views: 10519

Answers (5)

zos1000
zos1000

Reputation: 107

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>

Upvotes: -1

LuBre
LuBre

Reputation: 1809

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.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272742

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>

Upvotes: 13

vals
vals

Reputation: 64164

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>

Upvotes: 3

Pramith Chathuranga
Pramith Chathuranga

Reputation: 524

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>

Upvotes: 2

Related Questions