CSS-Grid implementation

Hi,
Are you planning to support CSS-Grid?
If so, when will you do it?
Thank you

12-11-17 — With the release of Pinegrow 4.1 update:

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 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 !

:hearts: :evergreen_tree: :wink:

@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

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.

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

show-hide-visual-helpers-list

It would also be nice to have a general Grid Overlay as I mentioned here, toggleable as well. It would be beneficial with the various CSS Visual Editor controls.

:hearts: :evergreen_tree: :wink:

Nice article @matjaz .

Good to see you on Medium again, getting the word out about Pinegrow.

:evergreen_tree::hearts:


Here are a few resources with nice descriptive overviews, covering all aspects of the CSS Grid.

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/

2 Likes

@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.



Youtube Videos - Pinegrow CSS Grid Tutorial, 10 Videos.


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 !

:hearts: :evergreen_tree: :wink:

2 Likes

I came across this yesterday. It looks interesting too. What is most attractive is the ease of implementation and maneuvering.