我有一个有 3 列的网格，想要两条垂直线来分隔元素。
到目前为止，我只是创建了两个span元素，并使用 css 将它们放置在网格元素之间。
.vertical_line {
position: absolute;
height: 100%;
width: 2px;
background-color: black;
}
#v1 {
left: 33.33%;
}
#v2 {
left: 66.33%;
}
https://jsfiddle.net/0mg12etr/
更改列数会很烦人，并且只有在元素的宽度已知的情况下才能很好地工作。
有没有更简洁的方法来实现这一点？
这就是你想要的吗？认为这是一种你想做的方式，没有跨度并使用 ：：after
.grid-container {
width: 100%;
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.grid-element {
align-self: center;
height: 30px;
margin: 6px;
border: 1px solid black;
}
.grid-element:nth-child(2n+3)::after{
content:'';
width:1px;
height:100%;
display:block;
background-color:black;
position:absolute;
margin-left:-7px;
top:0;
}
#v1 {
left: 33.33%;
}
#v2 {
left: 66.33%;
}<html>
<body>
<div class="grid-container">
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
</div>
</body>
</html>你可以试试flex。
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
background:rgba(0,0,0,0.1);
text-align:center;
}
.column:nth-child(odd) {
background:rgba(0,0,0,0.3);
}
.column + .column {
border-left:2px solid red;
}
html, body {
height:100%;
margin:0;
padding:0;
}<div class="row">
<div class="column">
col1 row1
</div>
<div class="column">
col2 row1
</div>
<div class="column">
col3 row1
</div>
</div>
<div class="row">
<div class="column">
col1 row2
</div>
<div class="column">
col2 row2
</div>
<div class="column">
col3 row2
</div>
</div>您可以将垂直线插入到不同的元素之间，而不是将它们放在开头并使用绝对位置。您可能需要将所有内容包装在一个容器中，以保持网格容器和垂直线内联。
例如：
<div class="global-container">
<div class="grid-container">
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-container">
<span class="vertical_line"></span>
<div class="grid-container">
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-container">
<span class="vertical_line"></span>
<div class="grid-container">
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-element"></div>
<div class="grid-container">
<div>
你必须修改一些其他的css tho ： https://jsfiddle.net/6ocyr5b9/8/