Add a rule between CSS grid columns and rows

问题

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?

I can’t see it in the spec but perhaps I’m missing something or perhaps there’s something in development?

回答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.

回答2:

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>

回答3:

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>

回答4:

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>

回答5:

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

来源：https://stackoverflow.com/questions/46951181/add-a-rule-between-css-grid-columns-and-rows