在CSS网格列和行之间添加规则
在CSS网格列和行之间添加规则
提问于 2017-10-26 17:51:23
是否有一个css网格属性，用于在网格列之间添加规则(垂直线)，以及在网格行之间添加规则(水平线)，其工作方式与列规则相同或相似？
回答 4
Stack Overflow用户
发布于 2017-10-26 20:08:10
正如@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>
Stack Overflow用户
发布于 2018-07-19 04:56:36
您可以做的另一种选择是以特定的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>
Stack Overflow用户
发布于 2019-11-15 12:10:02
没有纯粹的grid-*方法可以做到这一点，但是你可以将子divs放在边框上，只是不要使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46951181
复制相关文章
相似问题