NO

Question

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

我在规范中看不到它，但也许我错过了一些东西，或者有些东西正在开发中？

Answer 1

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

NO

没有这样的财产。

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

Answer 2

正如@Paulie_D所说，不，没有。你必须做一些像这样可怕的事情才能得到一些东西 - 如果你这样做，你甚至可以使用until we uploaded a PDF File or and DOC | DOCX file with an Image or a table with it!.：

＆＃13;

grid-gap

＆＃13;

#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;
}

＆＃13;

Answer 3

您可以做的另一种选择是将特定的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 4

没有纯粹的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 5

另一个选择是考虑网格和网格单元格的背景色。如果您可以为网格背景着色并为元素应用中性白色，则网格背景将通过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>

缺点是，您仍然需要根据您的内容在网格周围进行大量的手动填充调整，并且，如果您的网格中包含大量内容，则背景会流血。

但是，对于简单的网格，它的工作频率比我想的要多。

Answer 6

使用＆＃34; hr＆＃34;标签你可以添加水平线，但要添加垂直线你必须使用CSS给边框。

在CSS网格列和行

6 个答案:

NO