# CSS-Grid implementation

**URL:** https://forum.pinegrow.com/t/css-grid-implementation/1319
**Category:** Feature Request
**Tags:** feature-request
**Created:** [October 21, 2017, 10:33pm UTC](https://forum.pinegrow.com/t/css-grid-implementation/1319 "2017-10-21T22:33:14Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [December 13, 2017, 6:29pm UTC](https://forum.pinegrow.com/t/css-grid-implementation/1319/3 "2017-12-13T18:29:34Z")

</div>

@matjaz,

A possible good addition to the CSS Grid tools in Pinegrow was discussed on Slack by @herrbuerli , about adding the ability to show CSS **grid outlines like Firefox** displays with their CSS Grid Inspector.

[https://developer.mozilla.org/en-US/docs/Tools/Page\_Inspector/How\_to/Examine\_grid\_layouts](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts)

Here are references to a couple of source examples that may help to enable the developers to bring such a feature into Pinegrow if you desire.

- [GitHub - ademilter/chrome-css-grid-highlighter: Css Grid Highlighter for Chrome](https://github.com/ademilter/chrome-css-grid-highlighter)
- [https://github.com/stephanmax/nitty-griddy](https://github.com/stephanmax/nitty-griddy)

Can’t hurt to reference and review the source, may spark some ideas for Pinegrow.

It could possibly be added to the **Show / Hide Visual Helpers**.

![show-hide-visual-helpers](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/abf543d0aceb8399c8d20fc872484734cc22b889.jpg)

![show-hide-visual-helpers-list](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/c472d492c69d3fc6ea4e9e379c6cd12369283e92.png)

It would also be nice to have a general [**Grid Overlay** as I mentioned here](http://forum.pinegrow.com/t/show-the-grid-and-container-borders/225/10), toggleable as well. It would be beneficial with the various CSS Visual Editor controls.

> [@Show the grid and container borders](http://forum.pinegrow.com/t/show-the-grid-and-container-borders/225/10):
>
> Hi @matjaz & @Emmanuel Similar to the outline overlay snippet, some might find general overlay grids beneficial to toggle on and off. To use for assisting with the visualization of layout and design concerning alignments, positioning, etc., when dealing with CSS properties. Especially now with the new CSS improvements across the app and in conjunction with using the new Visual CSS Editor. A few basic grids using simple gradients: /\* Line Grid \*/ .grid-lines { background-size: 10px 10px; …

♥ 🌲 😉

---

_[View the full topic](https://forum.pinegrow.com/t/css-grid-implementation/1319)._
