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

问题描述 投票：0回答：8

是否有一个CSS网格属性可以在网格列之间添加一条规则（垂直线），在网格行之间添加一条规则（水平线），与列规则的工作方式相同或相似？

css css-grid
8个回答
12
投票

是否有一个CSS网格属性可以在网格列之间添加一条规则（垂直线），在网格行之间添加一条规则（水平线），与列规则的工作方式相同或相似？

不

没有这样的属性。

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

9
投票

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

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>

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

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

4
投票

正如@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>

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>

2
投票

没有纯粹的

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>

2
投票

仅使用 ::after 选择器和绝对位置怎么样

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

0
投票

我所做的如下，考虑到我使用了顺风（lo que hice fue lo siguiente，考虑使用顺风）：

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>

这是 css 中的 lineBetween 属性（este es la propiedad lineBetween en css）：

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.