如何用CSS显示网格线

Question

我正在使用getskeleton.com作为一个响应式网站，我试图在背景中显示类似http://nimb.ws/fTE2AR或http://fearonhay.com/residential/courtyard-house的网格线。实现这一目标的最佳方式是什么?

Answer 1

您可以打开位于已声明display: grid的div中的网格按钮。

你所要做的就是打开浏览器的开发者工具(我的是基于Chromium的Microsoft Edge)。

你会看到一个这样的按钮。

网格按钮

然后你可以按照自己的意愿编码和测试

Answer 2

试试这个——至少它会让你走上正确的轨道。您可能会将其定位为固定或绝对取决于您想要的。Gl高频。

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

Answer 3

我很晚才给出这个答案，但我只是对提供的答案不满意。下面是我在页面上创建竖线的方法:

@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