您可以打开位于声明了display: grid的div中的网格按钮。
你所要做的就是去你的浏览器的开发工具（我的是微软的边缘，这是基于 chrome ）。
你会看到一个像这样的按钮。
Grid button
然后你就可以随心所欲地编码和测试了。

我很晚才回答这个问题，但我只是对提供的答案不满意。这是我用来在页面上创建竖线的方法：

@mixin pinstripe_bg_single($bg_color, $pinstripe_thickness, $columns) {
  background: linear-gradient(to right, $bg_color calc(100% - #{$pinstripe_thickness}), darken($bg_color, 5%) calc(100% - #{$pinstripe_thickness}) 100%) left top / calc((100% + #{$pinstripe_thickness}) / #{$columns})  100%;
}

它目前是SASS格式，所以您必须将其修改为纯CSS格式。

试试这个-至少它会让你走上正确的轨道。你很可能会根据你想要的来定位这个固定的或绝对的。gl hf。

.grid-line {
  border: 1px solid black; /* try border-left and border-right */
  height: 999px;
  /* play with positions - fixed ect.. */
}

<div class="container">
  <div class="row">
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
    <div class="one column grid-line"></div>
  </div>
</div>