4

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?

user3534270
  • 51
  • 1
  • 1
  • 2
  • 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
  • 1
    @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

2 Answers2

1

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.

Nicolas
  • 11
  • 1
  • 4
0

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. 

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

<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
  • 1,262
  • 12
  • 24