CSS grid, where were you 15+ years ago?<p>CSS was such a mess for so long because of the complete lack of a consistent easy-to-understand layout mechanism. This has spawned the creation of countless workarounds and javascript gizmos, JUST SO you could stick something on a webpage where you want to go and have it behave in a sane way under resize and different browsers.<p>I welcome CSS grid, it reminds me of the sane layout managers we're used to from writing desktop applications. It makes me wonder why we had to wait so long for this functionality to be part of the CSS standard.<p>As for the generator, I think it's nice. Most folks will get the hang of banging out arbitrary css grid layouts very quickly. This tool will accelerate that for many.
Nice. There are a few bugs:<p>- Clicking multiple times in a box causes an unreadable mess<p>- If the code gets too long the "Please may I have some code" model disappears off the page, including the only way to close it ("Done" button). Clicking outside the model doesn't close it nor does the escape key.<p>- If you set rows or columns to -1 it generates a display artifact which remains indefinitely.<p>- "What does this project do?" model cannot be closed or read fully (outside page limits).<p>I'm on Chrome retail latest (74.0.3729.169) with 125% Windows DPI.
All I needed for my grids was display: table with row wrapping. I got magazine layouts instead with worse vertical alignment of cell content. CSS Grid is cool and does previously impossible things, but I wish the industry fixed old techniques (where is 'gap' in flexbox?), instead of jumping on the next big thing.
Is there a reason to use a CSS grid and not a <table>? Seems like web devs have been crying about a missing feature for a long time when it's already existed. But I only know the basics of web development and don't know best practices, so I don't know why devs would be insisting on using CSS to create a grid when an HTML table works just fine.
It sadly doesn't solve the problem with literally all and every grid generator out there - no proper support for spans and areas. The biggest power of grid is the free-form layouting it provides - it just gets lost in these simplistic editors.
What do you all think of this in contrast to Firefox's Grid Inspector? More useful? Less useful? Serving different purposes?<p><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts" rel="nofollow">https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...</a><p>To put my question another way, I'm trying to figure out where people really need help while creating Grid layouts. Whether we need tools to deeply inspect existing layouts, or whether we just need tools to quickly generate layouts (like Sarah's tool).<p>Disclosure: I work on Chrome DevTools.
I'm surprised to see this big of a reaction. I created something with nearly identical features (only missing the ability to specify gaps) right when grid was released. There was some interest, but not a ton.
As usual with these tools, they're very useful (probably) but almost unusable by anyone with bad contrast vision. Please up the contrast on all the various borders and controls like the arrows on the various number selectors. I can barely use them and I don't think my contrast perception is actually all that bad, this must just be a big black square to someone with properly bad contrast perception.
CSS Grid and its named areas are fantastic!<p>In my experience teaching web dev to complete beginners, everyone has been able to create reasonable layouts with CSS Grid.<p>That's an improvement over flexbox which shines and is meant for 1D layouts but requires heavy pushing and shoving for more difficult 2D layouts.
what the heck are these grid tags in the generated code?<p>I was thinking I was about to applaud a flex-box wizard that masterfully did ordering and more, but instead I see tags that I'm seriously not sure about. Are they compatible with the rest of my flex-box related site with Bootstrap all over the place? Are they compatible with my child elements and positioning?<p>Too many questions for this day and age. I don't think enough people are familiar with those particular tags that get generated, but if thats the "new way" lets revisit this in 2021