Hi,
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.
Cheers
Thomas
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!
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
! 
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:
Working:
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.
https://clients.updog.co/Reginald-TheTest/new-css-grid.html
My internal tests would never motivate to go on with CSS Grid at the day and date of writing.
Cheers
Thomas
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">
ouch - yeah, admittedly my bad! Switching order is required!
Cheers
Thomas
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.
Cheers
Thomas
So i built this page from scratch using the css grid pg tool. http://laboratorio.x10host.com/
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.
Amazing
Well! I actually like that, cheers nice example I will look at that in Pinegrow and put the leaves in another circular display window 
thanks!
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?
ie
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.
AndâŚ
âŚsigh, no wonder I can get nothing done! 
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?
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
Yeah, i did. Wanted to try the css grid thing.
your welcome
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
Pity⌠so nothing personal
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!
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
pg-empty-placeholder
class!
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
facility.
you had better delete those empty classes too
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
shocking 
hee hee.
Still, I do like the use of white space in this layout and erratic ness of it
