Do you use CSS Grid?


I went through the tutorial for CSS grid yesterday, but still not quite sure if generally people use this or do they just stick to manually creating sections, containers and columns? CSS Grid seems to have some Interesting features, but how widely are they used out there?

Thanks for your replies guys to this beginner question.

Good question. Speaking for me (at the date of writing):

No - I don’t use it. As you already stated, I’m as well a “section-oriented” one - or in other words one-dimension designer. So the real strength of the two dimensions (horizontally and vertically) doesn’t fit into my current design scheme.

The CSS grid does have some ultra cool features such as the grid-gap (column-gap) but generally spoken, it reminds me too much on modern-superfluid-semantic table-design somehow.

But it’s perhaps just me.



Edit: Just dug another thread out I created some moons ago (with not much of activity) CSS Grid - Just a cent for your thoughts


I tried it a couple of times, closely following the tutorial, but found I could generate my layouts quicker with the traditional build (sections, containers, rows/columns) rather than using CSS grid. Also had great difficulty later applying bootstrap elements to a CSS grid layout. Sooo… I’ll wait awhile until I see a usage prevalence of this build technology and have to adapt to stay ‘cool’.


As with every new technique, it would take some time to be widely used and to become familiar with it. I like CSS Grid! Played with it, but didn’t used it in a project yet.

It can be difficult (sometimes), to change old habbits and ways/methods you are very used to. And change the way to make layouts.

It probably takes some time and effort to adopt and switch to this new way of making layouts completly. And are able to make layouts as easy and fast as with old(er) techniques that you are probably more familiar with. Time will tell…

And I must say, that the Visual Helpers @matjaz build for using CSS Grid and how it is implemented in Pinegrow is very helpful and easy to use! He did a great job!

1 Like

I found this video very informative about CSS grid and the main differences with the traditional.


I don’t use it. Or, perhaps I should say, I haven’t needed to use it yet. I’ve been pretty comfortable with the Bootstrap flexbox grid now for the past year, but if the need arises where I have to do something that can only be done with CSS grid, I’m not averse to using it.

OH man! I finally just got around to finishing watching this vid! (in 3 parts) awesome.
So inspiring… let me at it
! :stuck_out_tongue:

Nice you found it worth watching.

Well - to really figure out how and if CSS Grid works, I followed @matjaz great helping videos and fiddled (according to him) a test-page together.

It’s (perhaps) certainly me, but what I figured out is mediocre, literally.
On my OS (Mac Mojave) only 50% of my personal testing-browsers really worked:


Chrome (not surprised 71.0.3578.80) and Opera (really surprised 57.0.3098.91)

Not working:

Safari (disappointing 12.0.1) and Firefox (surprised Quantum 63.0.3 (64-Bit))

I assume (and can’t prove), it’s the grid-template-rows property which is causing an unnatural vertical stretch. I think this is something to keep in mind, and it’s the reason why I’m writing it hereby down. If you find some time, it would be certainly of interest to quick confirm/disconfirm my experiences and add the PC/Linux stuff.

My internal tests would never motivate to go on with CSS Grid at the day and date of writing.



I didn’t inspect it, but with a quick look I noticed the order of the CSS files. Is this right or do you need to switch order…

<link rel="stylesheet" href="css/overwriterules.css">
<link rel="stylesheet" href="css/themagicstyles-min.css">
1 Like

ouch - yeah, admittedly my bad! Switching order is required!



My first guess is, you will probably have to set a height (instead of auto) for your thumbnail grid-auto-rows, if you use height:100% and object-fit for the child thumbs.

   .gallery {
    grid-auto-rows: minmax(100px, 200px);

this indeed does make sense as well.



So i built this page from scratch using the css grid pg tool.
It’s a page WF have in their showcase when introducing their new css grid feature. ( they where actually 2 or 3 months behing PG!).
I have to say that is using it is pretty logic and straight forward. Everything makes sense. You can quickly build a two dimension layouts and place, span, move elements super fast. You can even nest a grid inside a grid! if you need crazy granular control of the space/placing.
Excellent work PG dev team.

1 Like

Well! I actually like that, cheers nice example I will look at that in Pinegrow and put the leaves in another circular display window :slight_smile:


ah, its a bit broken in PineGrow, as you have declared the body tag twice.

Luckily Pinegrow’s Auto MANGE facility shows it up :D!

Oh! however Pinegrow wouldn’t let me delete the incorrect, first, body decleration …

And, then, after going into code editor to get rid of code, the visual editor failed to show the correct display type in real time (viewing this as a URL)

And…IM unable to VIEW the remote stylesheet in Pinegrow even though it is obviously downloaded and applied to the HTML, or am I missing something
*Yes, I know I can download and save the entire page Via my browser, but if having a quick inspection in PineGrow, why cant I view the style sheet?


I just wanted to VIEW the entire stylesheet as display:grid shows up in the upper individual styles for body tag, but as the visual editor was broken by the extra body (I assume) I wanted to check the complete styles sheet and make sure that the other styles were ok and that display grid was REALLY in the style sheet, still.


…sigh, no wonder I can get nothing done! :stuck_out_tongue:

in fact, that class, which shouldn’t be in production code, as it is supposed to be gone when content is applied to a div and so Is no longer empty is everywhere!

div class=“pg-empty-placeholder divider”

div class=“pg-empty-placeholder leaf”

div class="pg-empty-placeholder green-dot hover

div class="pg-empty-placeholder flowers

just HOW…did you create this site? :stuck_out_tongue:

Thank you, I fixed the doubled body declaration error.
I tried too to delete it from the structure panel but it would not let me!
I too noticed the bug with the empy-placeholder class.
And yes, it should display “grid” in the display field in under the visual tools.
dude! You Eagle eyes!
Thanks for checking

1 Like

Yeah, i did. Wanted to try the css grid thing.

your welcome :slight_smile:
every time I try to do ANYTHING… with pinegrow, I discover bugs, breaks, errors.
I’m totally pants at being creative but great at debugging :stuck_out_tongue:

Pity… so nothing personal :slight_smile:
And thanks I will play again now once you refresh it.

I do know that if you break MAJOR html code in Pinegrow it throws a fit.
(like missing HTML or Head, body element code)
The tree breaks and doesn’t render, etc so maybe the empty classes are due to the double body tags?

But still, I like it, nice and fresh!

1 Like

ah! now THAT is interesting!

I found out why the leaves (the ONLY thing I wanted to change) doesn’t appear in the VIEW URL view in Pinegrow.

its that



If that is in the LIVE site then…when Pinegrow renders it…er, it IS in fact, EMPTY
because that is specific code to PINEGROW and shouldn’t be in production code.
Pinegrow views ANYTHING with that class as empty, and throws the content away!

Which is why it doesn’t render when I view your site via Pinegrow View URL

you had better delete those empty classes too :slight_smile:
As they prevent the Flowers and the Palm leaf from rendering in Pinegrow for me until I delete the empty classes (and the green dot)

aaaaand… it might be an idea to optimise your images for the web too.
they are a bit large…

like 2.6 MB for a leaf!
the others could do with a bit of save for web loving too :slight_smile:

shocking :smiley:
hee hee.

Still, I do like the use of white space in this layout and erratic ness of it

1 Like