Add a rule between CSS grid columns and rows - css

Question

Is there a css grid property to add a rule (vertical line) between grid columns, and a rule (horizontal line) between grid rows, in the same way, or similar, that column-rule works?

Answer 1

Is there a css grid property to add a rule (vertical line) between grid columns, and a rule (horizontal line) between grid rows, in the same way, or similar, that column-rule works?
NO
There is no such property.
CSS Grid rows and columns are entirely virtual and only indicate the start and end point of their respective areas for the browser's layout engine.

Answer 2

Another option is to think about the background colors of both your grid and your grid cells. If you can color the background of the grid and apply a neutral white to your elements, the grid background will bleed through the grid-gap. This effectively gets you grid rules.
Example:
.grid-container {
background-color: #111; /* color of the line between cells */
display: grid;
grid-gap: 1px; /* size of the line between cells */
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: minmax(min-content, max-content);
padding: 1px; /* size of the line around the grid */
}
.grid-item {
background-color: #fff; /* cells need a bg color for this to work */
min-height: 100px;
}
<section 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 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>
</section>
Downside is that you still need to do a lot of manual padding adjustments around the grid depending on your content and, if you have a grid with weird amounts of content, the background will bleed through.
But, for simple grids, this works more often than I think it should.

Answer 3

As #Paulie_D said, no there isn't. You would have to do something as hideous as this to get something even close it it - you can't even use grid-gap if you do this:
#grid{
display: inline-grid;
grid-template-rows: auto 2px auto 2px auto;
grid-template-columns: auto 2px auto 2px auto;
}
.item{
width: 5rem;
height: 5rem;
background: red;
}
.rule{
background:black;
}
<div id="grid">
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
<div class="rule"></div>
<div class="item"></div>
</div>

Answer 4

Another option you could do would be to target a specific div and designate that as your horizontal rule column by having it span multiple columns.
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.wrapper>div {
background-color: #eee;
padding: 1em;
}
.fullRow {
grid-column: 1/ 4;
}
<div class="wrapper">
<div>
first column
</div>
<div>
second column
</div>
<div>
third column
</div>
<div class="fullRow">
<hr>
</div>
<div>
first column
</div>
<div>
second column
</div>
<div>
third column
</div>
<div class="fullRow">
<hr>
</div>
</div>

Answer 5

No pure grid-* way to do it but you can put borders on the child divs, just don't use grid-column-gap (padding instead). Showing some nth-child cleanups for inside-only rules, and some custom per-column text alignment.
.container {
display: grid;
grid-template-columns:
.15fr
.20fr
.05fr
.15fr
.08fr
.1fr
.20fr;
/*grid-column-gap: 0*/
}
.container>div {
border-top: 1px solid gainsboro;
border-left: 1px solid gainsboro;
padding: .2rem .4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* get rid of leading border (optional) */
.container>div:nth-child(7n+1) {
border-left: unset;
}
/* get rid of top -most border (optional) */
.container>div:nth-child(-n+7) {
border-top: unset;
/* this is could also be the "header" row, bolding etc. goes here*/
}
/* custom per-column text alignments */
.container>div:nth-child(7n+3),
.container>div:nth-child(7n+5) {
text-align: end;
}
<div class="container">
<div>2019-11-14</div>
<div>Nov 10 - 13, 2019</div>
<div>4</div>
<div>Sun - Wed</div>
<div>669</div>
<div>Likely</div>
<div>North Carolina</div>
<div>2019-11-14</div>
<div>Nov 10 - 13, 2019</div>
<div>4</div>
<div>Sun - Wed</div>
<div>627</div>
<div>Likely</div>
<div>Nevada</div>
<div>2019-11-14</div>
<div>Nov 1 - 7, 2019</div>
<div>7</div>
<div>Fri - Thu</div>
<div>347</div>
<div>Adults</div>
<div>North Carolina</div>
<div>2019-11-13</div>
<div>Nov 1 - 13, 2019</div>
<div>13</div>
<div>Fri - Wed</div>
<div>695</div>
<div>Likely</div>
<div>California</div>
</div>

Answer 6

What about just using ::after selector and absolute position
.grid-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
column-gap: 41px;
}
.column {
position: relative;
background: pink;
}
.column::after {
display: block;
content: "";
background: red;
width: 1px;
height: 100%;
position: absolute;
top: 0px;
right: -21px;
}
.column:last-child::after {
display: none;
}
<div class="grid-container">
<div class="column">
Bear claw gingerbread danish chocolate cheesecake icing shortbread.
</div>
<div class="column">
Bear claw gingerbread danish chocolate cheesecake icing shortbread.
</div>
<div class="column">
Bear claw gingerbread danish chocolate cheesecake icing shortbread.
</div>
<div class="column">
Bear claw gingerbread danish chocolate cheesecake icing shortbread.
</div>
</div>

Answer 7

By using "hr" tag you can add horizontal line, but to add vertical line you have to give border using CSS.