Add a rule between CSS grid columns and rows

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.

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>

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>

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.

Add a rule between CSS grid columns and rows

NO

Tags:

Css

Css Grid

Related

Recent Posts