在 CSS 网格列和行之间添加规则

Question

是否有css网格属性在网格列之间添加规则（垂直线），在网格行之间添加规则（水平线），以相同的方式或类似的方式，该列规则有效吗？

Answer 1

通过使用 "hr" 标签，您可以添加水平线，但要添加垂直线，您必须使用 CSS 给边框。

Answer 2

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?

没有

没有这样的属性。

CSS 网格行和列完全是 虚拟的，并且仅指示浏览器布局引擎各自区域的起点和终点。

Answer 3

正如@Paulie_D所说，不，没有。你必须做一些像这样可怕的事情才能得到一些东西甚至关闭它 - 如果你这样做你甚至不能使用 grid-gap:

#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

您可以做的另一种选择是定位特定的 div 并将其指定为您的水平规则列，方法是让它跨越多个列。

  .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

没有纯粹的 grid-* 方法，但您可以在子 div 上放置边框，只是不要使用 grid-column-gap（改为 padding）。显示仅内部规则的一些第 n 个子项清理，以及一些自定义的每列文本对齐方式。

.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

另一种选择是考虑网格和网格单元格的背景颜色。如果您可以为网格背景着色并为您的元素应用中性白色，则网格背景会渗入 grid-gap。这有效地让你网格规则。

示例：

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

缺点是您仍然需要根据您的内容在网格周围进行大量的手动填充调整，如果您的网格包含大量奇怪的内容，背景将会渗出。

但是，对于简单的网格，这比我想象的更有效。

在 CSS 网格列和行之间添加规则

Add a rule between CSS grid columns and rows

css

css-grid

没有