# CSS-Grid implementation **URL:** \ **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:** 6\ **Page:** 1
**Author:** ![mohamed](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mohamed](https://forum.pinegrow.com/u/mohamed)\ **Post date:** [October 21, 2017, 10:33pm UTC](https://forum.pinegrow.com/t/css-grid-implementation/1319/1 "2017-10-21T22:33:14Z")
Hi, Are you planning to support CSS-Grid? If so, when will you do it? Thank you ---
**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, 3:39am UTC](https://forum.pinegrow.com/t/css-grid-implementation/1319/2 "2017-12-13T03:39:45Z")
> [@mohamed](#): > > Are you planning to support CSS-Grid? **12-11-17** — With the release of **Pinegrow 4.1** update: > **[Release 4.1 - Dec 11, 2017 | Pinegrow Web Editor](https://docs.pinegrow.com/release_notes/release-4-1-dec-11-2017/)** > > Pinegrow 4.1 is available for download. ![pg41-grid](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/e6e7d01b653159b4c0338c545f07265bf0677ff1.jpg) > CSS Visual Editor got basic support for the CSS grid. Grid properties are located in “Grid container” and “Grid item” sections of the Visual editor. > > CSS List editor and CSS code editor have auto-complete support for grid-\* properties. > > [Grid by Example](https://gridbyexample.com/examples/) is a good place to start learning about the grid. In Pinegrow, open individual examples with “Open url” and then play around with grid settings in the Visual editor in the Style panel. * * * Great to see **CSS Grid Support** beginning to be included ! ♥ 🌲 😉 ---
**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")
@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; … ♥ 🌲 😉 ---
**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 15, 2017, 5:22am UTC](https://forum.pinegrow.com/t/css-grid-implementation/1319/4 "2017-12-15T05:22:39Z")
Nice article @matjaz . Good to see you on Medium again, getting the word out about Pinegrow. > **[How to Learn CSS Grid with Pinegrow](https://medium.com/@mattront/how-to-learn-css-grid-with-pinegrow-e865ece2e137)** > > There are many useful CSS Grid tutorials out there. So instead of explaining the CSS Grid itself, I’ll show you how to use Pinegrow Web… 🌲♥ * * * Here are a few resources with nice descriptive overviews, covering all aspects of the CSS Grid. > **[Basic Concepts of grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)** > > CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements. This article introduces the CSS Grid Layout and the new terminology that is part of the CSS Grid Layout... > **[CSS Grid Layout + Firefox = ❤️](https://mozilladevelopers.github.io/playground/css-grid/)** > > CSS Grid Layout is a game-changer for web developers. Learn more about CSS Grid and the CSS Grid Layout panel in Firefox. **A Complete Guide to Grid** – by Chris House (also can be found on CSS-Tricks) [http://chris.house/blog/a-complete-guide-css-grid-layout/](http://chris.house/blog/a-complete-guide-css-grid-layout/) ---
**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:** [July 5, 2018, 1:02pm UTC](https://forum.pinegrow.com/t/css-grid-implementation/1319/5 "2018-07-05T13:02:47Z")
@matjaz, @Emmanuel, @MhdAljuboori, Really nice work on the updates for the **CSS Grid Visual Tools** , along with the supporting learning materials with the update in **Pinegrow 4.9**. * * * > **[Introducing the Visual CSS Grid Editor in Pinegrow Web Editor](https://medium.com/@mattront/introducing-the-visual-css-grid-editor-in-pinegrow-web-editor-9412fd786edb)** > > By now you’ve probably heard (a lot) about the CSS grid, a set of CSS properties for defining two dimensional web layouts. * * * Youtube Videos - [Pinegrow CSS Grid Tutorial, **10 Videos**.](https://www.youtube.com/playlist?list=PLNHKFtMjaNvHeanxy-kU579WigZiHDoH0) * * * If these CSS Grid features don’t gain some praise and discussion across the front-end web industry for Pinegrow, then what will ? Nice work ! ♥ 🌲 😉 ---
**Author:** ![kohjonathan](https://avatars.discourse-cdn.com/v4/letter/k/ea666f/32.png) [@kohjonathan](https://forum.pinegrow.com/u/kohjonathan)\ **Post date:** [October 7, 2018, 3:08pm UTC](https://forum.pinegrow.com/t/css-grid-implementation/1319/6 "2018-10-07T15:08:32Z")
I came across this yesterday. It looks interesting too. What is most attractive is the ease of implementation and maneuvering. > **[Proof of concept: Dnn and Css grid working together!](https://www.dnnsoftware.com/community-blog/cid/155493/proof-of-concept-dnn-and-css-grid-working-together)** > > Over the past week I thought I’d play about with Css Grid (a new Css layout system). When I started to use Css Grid I started to think of ways the Css Grid would work well with Dnn and I came up...