Layoutit Grid – CSS Grids layouts made easy | Hacker News Reader

Layoutit Grid – CSS Grids layouts made easy

grid.layoutit.com

338 pointsparisianka37 comments

The people behind Flexbox Froggy[1] also have made Grid Garden[2], which I’d recommend if you respond well to gamified learning.

[1] https://flexboxfroggy.com/

[2] https://codepip.com/games/grid-garden/

I can't seem to play it, only buttons available are "Login" and "Register".

Alternate url: https://cssgridgarden.com/

I prefer these CSS games. They each have a fun story and excellent comic-book graphics, which helped motivate me to finish.

https://flexboxzombies.com/

https://gridcritters.com/

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.

Thanks for sharing! Bookmarked.

I don’t think anyone really “learns” CSS anymore. You just look it up when you have to use it.

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.

Oh, I used that one a few months ago !

Another one https://cssgrid-generator.netlify.app/ that I liked too (and the author is super cool I think, from the github comments).

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.

https://caniuse.com/css-grid

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.

Firefox has supported it since December 2019 ;)

(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've had some success with setting `display: contents` on grid children to avoid having to flatten everything. More detail here: https://css-tricks.com/get-ready-for-display-contents/

It's not a substitute for subgrids, but it does help in some situations.

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.

The support is very poor yet. What about built-in browser in a 5 years old smartphone?

Don't use new technologies, wait for 5 or 10 years until they are supported everywhere. Flexbox is good enough for 99% of cases.

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:

https://codepen.io/justd/full/yydezN/

(That flexbox tutorial is hosted elsewhere too but the ads are less intrusive on the codepen site)

Thanks for the kind words! So awesome that you are sharing the tools with others, I hope the rest of the team liked it too :)

It is so cool to see the tool in the front page of HN! We got an article published in css-tricks on Thursday about why we think generators are good tools for learning https://css-tricks.com/layoutit-grid-learning-css-grid-visua...

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.

If curious see also

Show HN from 2018: https://news.ycombinator.com/item?id=17618059

Nice! I think I would have figured it out faster if "save" were replaced with a checkmark. Usually "save" means persistence to me.

That's really cool. Thanks for another great tool.

Now...am I the only one that saw the headline, and wondered if it was a typo (la-you-tit)?

Yes, unfortunate domain name. It could at least use a hyphen: "layout-it"

Cool tool though! Great job!

added to my list of layout tools - please recommend more if you have them https://github.com/sw-yx/spark-joy/blob/master/README.md#lay...

That is a great list of resources. Thank you!

Neat and helpful. One thing I don't see here is the "RAM" technique which is covered here: https://web.dev/one-line-layouts/

Duplicate from my submission 2 days ago [0], strange why this pops up with the same url...

[0] https://news.ycombinator.com/item?id=24802633

My favorite way to easily make css grid: https://webflow.com

Be careful with CSS grid. I tried to print out a page that I designed using grid and it completely wrecked the layout.

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.

If you didn’t compensate for printed pages, then you’re not done with your CSS.

Just like if you designed something on a desktop and didn’t test it on a mobile device.