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

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

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/

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.

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.

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.

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.