CODEWITHSUNDEEP
htmlcssgridskeleton-css-boilerplate
user3534270
user3534270

Reputation: 79

how to show grid lines with CSS?

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?

Upvotes: 7

Views: 35114

Answers (3)

Nicolas
Nicolas

Reputation: 49

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.

Upvotes: 4

TheCarver
TheCarver

Reputation: 19713

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.

Upvotes: 0

Radmation
Radmation

Reputation: 1524

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>

Upvotes: 0

Related Questions