Show HN: I made a drag and drop CSS grid generator

Nice, however there is an issue, for example add a few boxes then if you try to move one and move it as towards the others to overlap, eventually they go all the way down, outside the bounrary of the grid and feels funny but yeah. No errors showing on the console. I don't think it was the intended operation as they cover the code part.

If is not clear what I am saying, I can try to make a video or something.

I previously made a Tailwind Grid Generator to make grid layouts with Tailwind CSS easier. It received a lot of positive feedback, so I decided to create a similar tool for plain CSS as well

Nice tool. I feel generators are good learning tools, but once you grasp the syntax and features you gain more flexibility and are able to connect code to a concrete visual in your mind.

The chrome dev tools are also useful as it allows you to modify a grid in place to instantly see your changes.

I wrote a post on grid here:

https://cssprinciples.com/3/grid/

Thank you! I’m an older programmer and can do grids using tables by muscle memory - and have always struggled to figure out the right css layout. Tools like this are super helpful.

Tools like this are actually very helpful especially if you are learning to understand them.

A few years ago, I found a site generator similar to this one, but it wasn't drag and drop. I can't remember the name of the site.

From there I learned about grid-template-columns, gap, and some basic things about CSS grid. It didn't cover everything, but it introduced me to how the grid works when I was just learning about it.

Keep up the good work. It will always make it easy for people to learn, or use it directly.

Back when grid was new, i had the feeling it would fundamentally change the way we build (responsive) web layouts by basing everything on template areas and just reassigning on breakpoints etc.

I never got around to build some kind of internal framework for this, i ended up hacking away with flex (which was already the gamechanger – hail to the OGs from the times before flexbox). Then tailwind came along and after disregarding it for a long time, it ended up to fulfil every need i had for quickly doing responsive frontends quickly.

Still wondering if anyone knows good frameworks or examples of people using template areas as the main fundament for their layouting?

I'd like to try, but it's not important enough for me to build something well enough that can be used as a general base. Or maybe that doesn't even make much sense or much of a difference. Haven't even thought about it much.

Any thoughts on this are welcome.

Ah, also: nice work OP. I like it. Maybe you have some ideas about template areas yourself. I will definitely use your tool next time i fiddle around with grids.

This is really great! Thanks for making it!

I will say, personally, my problems with grid are usually centered around getting them to do the expected dynamic rearrangement, rather than just setting up the grids in the first place. It's always an MDN hunt, for me, when I want to get a grid to collapse to fewer columns rather than squish the columns (or vice-versa).

But, in general, it's always nice to have simple utilities like this to simplify those rote things we do all the time. I'm sure I'll be using it sooner rather than later!

One quick suggestion: if establishing grids set the state in the url, it would be trivial to send someone a link to your utility which had the grid they wanted. Not sure exactly how useful that would be, but I just figured I could pop a bunch of "standard" layouts into a text file as urls and that would make the utility easier to rely on, for me.

I found 2 bugs: - the width is not responsive, if you resize the browser window the boxes don't resize. - the boxes are shorter than the containers (for me, on Chrome on macOS) so every new row is a bit higher on the grid. On row 5 the boxes are basically positioned one whole row above.

I'm not a web dev, but I imagine that some may want more than 12 columns, like if I were making a game with many cells. I tried entering a larger number but the parsing was weird 22 -> 1 columns. Edit: It seemed to make those columns into rows as well.

Why the divs? body, nav, header, main, aside and footer display:grid and done. The rest is article and picture and if you really need a section ok have one, but that is it or am I missing something?

Really great UX for me. I am a full time web dev but I write page layouts so infrequently that I've never learned grid syntax deeply. Bookmarking this for the future.

Interesting tool, even better than mine, for FlexBox CSS: https://flexboxcss.com

Have you thought about open-sourcing the code for this page? I'd be curious how you made this. Works really well!

Isn't it odd to have class div1 div2 etc. Isn't that what the style attribute is for?

Here Hitesh presents a system to build any possible layout with tailwind, part of the recipe can be made with plain flexbox https://youtu.be/rbSPe1tJowY

Works really well on mobile. Nice job

Nice, Cool tool.

Cool!

cool

Where is the best place to find up-to-date information on stuff like layouts, and how to manage crossbrowser/accessibility etc? It's a minefield when trying to self-learn these things as it's hard to tell when info is wrong or bad practice, outdated, etc.

For example - is this CSS grid-generation/layout current best-practice for building the base, foundational layer for a simple static website? Say, with three columns, one centered and wider with content, the others narrow and empty - serving as margins?

And how would one arrive there, as a solution? Searching online turns up an infinity of options such that it's difficult if not impossible to figure out how to do things in if not maybe "the" right or best way, at least "a" right way.