如何使用CSS显示网格线？

Question

我正在使用getskeleton.com创建一个响应式网站，想要像这样 http://nimb.ws/fTE2AR 或者 http://fearonhay.com/residential/courtyard-house 一样在背景中显示网格线。最好的实现方法是什么？

- user3534270

---

我有一个想法 - 你可以创建自己的容器 - 将它们固定位置 - 将高度设置为像9999px这样的巨大值 - 并将它们设置在所有元素之上。 - Radmation

@Radmation，这比你想象的要容易得多。创建一个可平铺的背景图像并将其应用于您的容器即可。 - hungerstar

Answer 1

您可以打开具有声明display: grid的div中的网格按钮。

您只需要转到浏览器的开发人员工具（我的是基于Chromium的Microsoft Edge）。

您将看到像这样的按钮。

网格按钮

然后您可以编写并测试您想要的代码。

- Nicolas

Answer 2

试试这个 - 至少它会让你走上正确的轨道。根据你想要的，你可能会将其固定或绝对定位。祝好运。

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

- Radmation

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。

- TheCarver