how to show grid lines with CSS?

Question

I'm using getskeleton.com for a responsive website and I'm trying to show the grid lines in the background something like this http://nimb.ws/fTE2AR or http://fearonhay.com/residential/courtyard-house . What would be the best way to accomplish that?

I have an idea - you can create your containers - position them fixed - set the height as something huge like 9999px - and set them over everything — Radmation, Aug 15 '16 at 22:05
@Radmation it's a lot easier than that. Create a tile-able background image and apply it to your container. — hungerstar, Aug 15 '16 at 22:11

score 5 · Answer 1 · answered Dec 19 '20 at 21:46

You can turn on the grid button located in the div which has display: grid declared.

All you have to do is go to your browser's developer tools (mine is Microsoft Edge which is based on Chromium).

You will see a button like this.

Grid button

And then you can code and test as you wish.

score 0 · Answer 2 · edited Sep 30 '22 at 06:06

Try this - at least it will put you on the right track. You will likely position this fixed or absolute depending on what you want. 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>

score 0 · Answer 3 · answered Dec 29 '22 at 01:10

I'm very late to this answer but I just wasn't happy with the answers provided. This is what I use to create vertical lines across the page:

@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%;
}

It's currently in SASS format, so you'll have to modify it for pure CSS.

how to show grid lines with CSS?

3 Answers3