# A transparent "layer" of grid viewing, to help design

**URL:** <https://forum.pinegrow.com/t/a-transparent-layer-of-grid-viewing-to-help-design/622>\
**Category:** Feature Request\
**Created:** [January 18, 2017, 9:26am UTC](https://forum.pinegrow.com/t/a-transparent-layer-of-grid-viewing-to-help-design/622 "2017-01-18T09:26:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [January 18, 2017, 9:26am UTC](https://forum.pinegrow.com/t/a-transparent-layer-of-grid-viewing-to-help-design/622/1 "2017-01-18T09:26:47Z")

</div>

Hello,

Add a “layer” of grid, for the tracking, it would be nice 🙂  
This helps in layout with grills.  
For example: Free Bootstrap v3.0 PSD Grid

![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/fe89564e7008661d9cd456c9d787a2d6d6f46f19.jpg)

thank you

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [January 18, 2017, 7:55pm UTC](https://forum.pinegrow.com/t/a-transparent-layer-of-grid-viewing-to-help-design/622/2 "2017-01-18T19:55:50Z")

</div>

Have a look at this [idea](http://forum.pinegrow.com/t/show-the-grid-and-container-borders/225/5?u=rob)

---

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [January 19, 2017, 10:19am UTC](https://forum.pinegrow.com/t/a-transparent-layer-of-grid-viewing-to-help-design/622/3 "2017-01-19T10:19:31Z")

</div>

thank you!  
It is a superb solution "Grid displayer for Bootstrap and Foundation"  
But it does not work in the Pinegrow editor: /  
It is at the time of editing in Pinegrow that this help is useful.  
thank you

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [January 23, 2017, 5:52pm UTC](https://forum.pinegrow.com/t/a-transparent-layer-of-grid-viewing-to-help-design/622/4 "2017-01-23T17:52:03Z")

</div>

@JoseFR try this out.

Credit goes to @BATLABOR for this I’m just doing a short write up and adding a few screenshots!

1. Create new page in Pinegrow and save
2. Click Page \> edit code \> then paste the two lines of code below into the head of the page, I placed it just before the closing tag

`<script src="http://alefeuvre.github.com/foundation-grid-displayer/gd-bookmarklet.min.js"></script>`

`<link href="http://alefeuvre.github.com/foundation-grid-displayer/stylesheets/gd-bookmarklet.min.css" rel="stylesheet">`

1. Move your cursor over the top of the page you’ve created and a container appears that will allow you to select a framework, e.g. Bootstrap 3 if you are using BS 3
2. Add rows, columns, etc. to your layout and enjoy your grid layer!

**Screenshots:**

Adding code and how it looks in PG:

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/af557ef1c5f25f43181c50fe5902acae8492e141.png)

* * *
Chose your framework:

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/8b858b733f2a923ac511e3bbcd6147945d5260a5.png)

* * *
Edit display of grid, colour, etc.

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/1feb7c486c0ec398d6799ccb0a78cbd135666537.png)

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [January 26, 2017, 6:20pm UTC](https://forum.pinegrow.com/t/a-transparent-layer-of-grid-viewing-to-help-design/622/5 "2017-01-26T18:20:28Z")

</div>

Well! now that is “Oh La LA!” Sexy!

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [January 27, 2017, 1:30am UTC](https://forum.pinegrow.com/t/a-transparent-layer-of-grid-viewing-to-help-design/622/6 "2017-01-27T01:30:32Z")

</div>

@schpengle if you think that’s Oh La La! Sexy! you need to get out more and I think @Emmanuel will be offended on behalf of his fellow countrymen 🙂 🇫🇷

---

<div class="post-metadata">

**Author:** ![Eric](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/eric/32/94_2.png) [@Eric](https://forum.pinegrow.com/u/Eric)\
**Post date:** [June 1, 2017, 12:35am UTC](https://forum.pinegrow.com/t/a-transparent-layer-of-grid-viewing-to-help-design/622/7 "2017-06-01T00:35:55Z")

</div>

Rob that is tight my brother! so do you put the script at the top as well with the css?

---

<div class="post-metadata">

**Author:** ![Eric](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/eric/32/94_2.png) [@Eric](https://forum.pinegrow.com/u/Eric)\
**Post date:** [June 1, 2017, 12:38am UTC](https://forum.pinegrow.com/t/a-transparent-layer-of-grid-viewing-to-help-design/622/8 "2017-06-01T00:38:44Z")

</div>

never mind i see it in the pic…thanks bro