For someone who does mostly serverside work these days... Tools like this are awesome. I know how flexbox works in theory, but for the one or two layouts I do a year it's not worth learning.
That is how most crafts with a large knowledge base works. You learn what you use the most by repetition, know that other things exist, and use a reference when you need to apply it.
Mastering the craft does not mean you know by hand everything in it (every seam, every recipe, every joint, every semi-conductor). It means that you know what exists, when to apply it, and where to find the required information about it.
I’ve been at this for 15 years and my team thinks I’m a CSS magician but I agree, I just remember enough stuff to piece the rest together (which I have to look up as I need it).
I'm curious, this site is mostly making "tables", which is static. Usually when using grid I want something that flows nicely as the page resizes and as the content grows or shrinks. Is that doable here? How does it make sense to specify the number of rows? I guess the "apply repeat" checkbox maybe does it?
It is doable, there is both a grid-auto-columns and grid-auto-rows property. I don't think this example contains it.
Grid has kind of two dual purposes: an automatically responsive grid that can change columns/rows as needed, and as a 2D layout spec more similar to how traditional publishing is laid out.
Grid display doesn't require you to specify number of rows so you can just delete that from the CSS if you don't want it. Likewise you can generate several differnt grids and put them inside media queries to get the grid to behave differently at different sizes. I see tools like this as more starting points/ teaching aids than the thing you use in your final production code.
Whoa. I had no idea grids were so powerful. This is pretty much endgame in layout. Is there a similar system for iOS and Android? Don’t think auto layout or constraints work this way.
i love grids, but one quick word of warning: currently, there is not yet support for subgrid (with column/row definitions synched). meaning each grid cell must be a direct child of the grid parent. this gets in my way constantly when i'm trying to do some responsive layout change.
(Yeah, I know that doesn't help with the prevalence of Chrome, but it's worth pointing out since if nothing else it means you can already start learning it)
I had the same realization as you - I thought Flexbox was endgame until I really got into Grid. Both are still very useful, but more and more I see myself using Grid over display flex.
I just shared Layoutit grid site to my team last week. This site can take someone that doesn't understand grid to making a kick-ass layout in mere seconds. There's no other grid playground like it.
There is a similar site I recommend for people learning Flexbox here:
We open-sourced Layoutit Grid just a few weeks ago. There is still a lot of features we would like to add to showcase even more how powerful CSS Grid is. In case someone wants to help us out!
https://github.com/Leniolabs/layoutit-grid
I know it goes against the merits of the site, but it would be great if there was a fallback option to output CSS for browsers that do not support grids.
This would be pretty difficult, since at least some of the concepts of Grid (namely, anything involving calculation or auto-placement) are simply not supportable in old browsers.
One of the great things about grids (and flexbox too) is that the order the elements appear on the age does not depend on the order they appear on the file.
That makes it possible to finally present good content for people that can't use the layout (like blind people, or broken UAs like the print ones), and break nothing for most users. But you must forget the good placement practices of earlier.
[1] https://flexboxfroggy.com/
[2] https://codepip.com/games/grid-garden/