Add a rule between CSS grid columns and rows

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?

Vitebsk

Mybe this link can help your developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/… – Educe

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.

Eighth

though late, depending on the content, you could use columns instead w3.org/TR/css-multicol-1 though it is different usage semantically – Ambur

@AG It's a good thought, though in my experience, doing grid-like things with columns is often hampered by the fact that it's very hard to control column break. In principle break-after: column and break-inside: avoid-column allows you to, but as of early 2023 they're fairly poorly supported in browsers. But you may be lucky and be doing something where you don't need this. – Mahratta

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.

Loveland

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>

Unworthy

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>

Dissentious

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>

Whole

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>

Herd

Answer 7

What I did is the following, consider that I used tailwind (lo que hice fue lo siguiente, considera que use tailwind):

index.tsx:

        <div className='grid grid-cols-5'>
            <div className='grid place-content-center'>
                <p> </p>
            </div>

            <div className='grid place-items-center'> 
                <div className='lineBetween'> </div>
            </div>

            <div className='grid place-content-center'>
                <p> </p>
            </div>

            <div className='grid place-items-center'> 
                <div className='lineBetween'> </div>
            </div>

            <div className='grid place-content-center'>
                <img src='' alt='' />
            </div>
        </div>

This is the lineBetween property in css (este es la propiedad lineBetween en css):

.lineBetween {
   width: 132%;
   height: 0.075vh;
   background-color: #2AC46C;
 }

Eliseo

Answer 8

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

Laraelaraine