# Do you use CSS Grid? **URL:** \ **Category:** Beginners\ **Created:** [December 2, 2018, 3:05pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474 "2018-12-02T15:05:57Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![ash786](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/ash786/32/1565_2.png) [@ash786](https://forum.pinegrow.com/u/ash786)\ **Post date:** [December 2, 2018, 3:05pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/1 "2018-12-02T15:05:58Z")
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. ---
**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\ **Post date:** [December 3, 2018, 8:52am UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/2 "2018-12-03T08:52:46Z")
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](https://forum.pinegrow.com/t/css-grid-just-a-cent-for-your-thoughts/1679) ---
**Author:** ![randyrie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/randyrie/32/2103_2.png) [@randyrie](https://forum.pinegrow.com/u/randyrie)\ **Post date:** [December 3, 2018, 2:55pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/3 "2018-12-03T14:55:05Z")
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’. ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [December 3, 2018, 5:14pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/4 "2018-12-03T17:14:38Z")
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! ---
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [December 3, 2018, 6:11pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/5 "2018-12-03T18:11:38Z")
I found this video very informative about CSS grid and the main differences with the traditional. ---
**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\ **Post date:** [December 4, 2018, 2:26am UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/6 "2018-12-04T02:26:00Z")
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. ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [December 5, 2018, 2:28pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/7 "2018-12-05T14:28:59Z")
OH man! I finally just got around to finishing watching this vid! (in 3 parts) awesome. So inspiring… let me at it ! 😛 ---
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [December 5, 2018, 10:40pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/8 "2018-12-05T22:40:39Z")
Nice you found it worth watching. ---
**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\ **Post date:** [December 10, 2018, 9:55am UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/9 "2018-12-10T09:55:15Z")
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](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 ---
**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\ **Post date:** [December 10, 2018, 11:28am UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/10 "2018-12-10T11:28:57Z")
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… ```auto ``` ---
**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\ **Post date:** [December 10, 2018, 11:33am UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/11 "2018-12-10T11:33:27Z")
ouch - yeah, admittedly my bad! Switching order is required! Cheers Thomas ---
**Author:** ![m-artin](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/m-artin/32/1447_2.png) [@m-artin](https://forum.pinegrow.com/u/m-artin)\ **Post date:** [December 10, 2018, 3:26pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/12 "2018-12-10T15:26:00Z")
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); } ``` ---
**Author:** ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)\ **Post date:** [December 10, 2018, 3:49pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/13 "2018-12-10T15:49:33Z")
this indeed does make sense as well. Cheers Thomas ---
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [December 20, 2018, 5:32pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/14 "2018-12-20T17:32:01Z")
So i built this page from scratch using the css grid pg tool. [http://laboratorio.x10host.com/](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 ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [December 20, 2018, 8:52pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/15 "2018-12-20T20:52:32Z")
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! ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [December 20, 2018, 8:57pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/16 "2018-12-20T20:57:41Z")
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 … ![2018-12-20_20-58-58](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/bc6614098f3d21d14f260bdbdd01fe3b4e3290a9.png) 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) ![2018-12-20_21-02-34](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e32c9c13cbae4612f642e9c5373a8620553cc46e.png) 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 ![2018-12-20_21-08-24](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/fb60ebaa8712840d806ae37c7095eccbc3b06bbf.png) 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… ![2018-12-20_21-15-57](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f40cddeccfc6fbb52135ec25a8daa78b838ca948.png) …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? 😛 ---
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [December 20, 2018, 9:25pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/17 "2018-12-20T21:25:21Z")
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 ---
**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\ **Post date:** [December 20, 2018, 9:27pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/18 "2018-12-20T21:27:09Z")
Yeah, i did. Wanted to try the css grid thing. ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [December 20, 2018, 9:27pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/19 "2018-12-20T21:27:29Z")
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! ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [December 20, 2018, 9:34pm UTC](https://forum.pinegrow.com/t/do-you-use-css-grid/2474/20 "2018-12-20T21:34:54Z")
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 [Next page](https://forum.pinegrow.com/t/do-you-use-css-grid/2474.md?page=2)