return to table of content

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

robxorb
10 replies
2d9h

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.

zadokshi
2 replies
2d8h

I’ve always used “flex” layout for this. I’m not sure what is considered normal.

danielvaughn
0 replies
2d7h

There’s no normal, but a good rule of thumb that has worked for me is: use flex for one-dimensional layouts, and grids for two-dimensional layouts.

Brajeshwar
0 replies
2d7h

Grid lays out the structural layout, while Flex lays out the content ordering and positioning.

afloatboat
1 replies
2d8h

Grid has been around for a while now, together with flex it’s the way to go to start building layouts. But like everything it requires practice to get the nuances down and learn about the pitfalls. You won’t experience many cross browser issues these days with either of them. And in terms of accessibility you mostly need to consider that visual order does not necessarily match tab order. Especially for grid where you can arbitrarily place elements in the grid.

An older resource for learning grid would be https://youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3Ing.... 6 years old but grid itself has gone mostly unchanged. https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://flexboxfroggy.com/ Is a good way to introduce yourself with the concepts of flexbox.

6510
1 replies
2d8h

Anything that works is fine. 3 grid columns would work, flexbox would work too, but normally one would use margins. Something like this.

https://jsfiddle.net/gaby_de_wilde/5muq1tag/

I forget why I'm not using a single margin:auto, probably some weird edge case I didn't want to see ever again.

Etheryte
0 replies
2d3h

You wouldn't want to use a single `margin: auto`, because that sets the top and bottom margins to `auto` as well. For example if the parent container is flex, you'd then end up with a container that is centered vertically as well, which is not what you wanted. What you're probably looking for is `margin: 0 auto`.

robxorb
0 replies
1d23h

Thanks all, your responses have been incredibly helpful.

In summary (besides the layout-specific stuff which was great) - between the MDN documentation for learning and reference:

https://developer.mozilla.org/en-US/docs/Web

And, for checking compatiblity and common practice:

https://caniuse.com

A n00b like me can get a decent handle on current best practice and standards for web dev. Feel levelled-up - much appreciated!

promiseofbeans
0 replies
2d7h

Caniuse (https://caniuse.com/) aggregates data from MDN with their own data and has reasonably good search. I see browser and standards people linking to it from time-to-time.

memset
4 replies
2d7h

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.

hereonout2
3 replies
2d6h

Older programmer too, tables for layout is very retro though! Hopefully you're not still adding a spacer.gif here and there.

I recently picked up some front end work for the first time in about 15 years. Things have progressed so much, CSS grid is a dream but also the things that were horribly hacky in the 2000s with JS are now solved so well.

Not even talking about frameworks or react, with just vanilla CSS, JS and the mdn docs you can build really nice sites that were so so awkward to make before.

I'd encourage you to spend a few afternoons delving deep into this, a lot of the stuff I learnt years ago is still relevant and brings a solid foundation, it didn't take long to update my approach.

replwoacause
0 replies
2d4h

I grew up on spacer.gifs

lysp
0 replies
2d6h

Older programmer too, tables for layout is very retro though! Hopefully you're not still adding a spacer.gif here and there.

new-old school is to do spacer.base64.

lofaszvanitt
0 replies
2d4h

SPACER GIFS!!! Ahahahaha, good ol days :D.

ghosty141
3 replies
2d7h

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

yupyupyups
2 replies
2d7h

CTRL+SHIFT+I in Firefox.

Then you will be able to see the HTML and all the calculated CSS properties of each element.

If he uses Tailwind CSS you should be able to look at the class-attributes of the elements to figure out how it all works.

Haven't done so myself, on mobile.

kristopolous
1 replies
2d5h

Preface the URL with "view-source:" on mobile. Example: view-source:https://cssgridgenerator.io/

yupyupyups
0 replies
1d3h

It's worth noting that this wont work on single page applications where the DOM is dynamically generated by JS. You will need DevTools for that.

emadda
2 replies
2d5h

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/

dylan604
1 replies
2d4h

In the early days of web, tables were the goto for layouts with Web1.0. They could get really complicate so Macromedia's tools using Fireworks to slice the images and Dreamweaver to manipulate the HTML were great places to start. But as you said, after doing it enough you start to see all of the baggage/weight that these tools added to the HTML. I eventually got to the point of writing it by hand which would eliminate all of that extra "crap" that these tools added. Every byte saved was very important during the days of dial-up.

emadda
0 replies
2d2h

I learnt how to use tables for layout from Google's homepage design.

I think in general interaction between generator tools and hand written code is very difficult.

Once you start with one you cannot then use the other on the same code.

AlexDragusin
2 replies
2d7h

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.

riddley
0 replies
1d21h

You might want to give browser/platform info.

bduffany
0 replies
1d

I reproduced this too:

1. Click the box in the bottom right corner to create a cell. 2. Click the box just to the left of that one to create another cell. 3. Drag the cell you created in step 2 to the right. The cell on the bottom right gets pushed downwards, below the grid's lower boundary.

(Chrome/Android)

endofreach
1 replies
2d7h

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.

hinnisdael
0 replies
2d5h

I would argue you no longer need a framework when using CSS grid. Creating template areas once per breakpoint and assigning them once per container really is all there‘s to it. Sure, you can build another abstraction on top of that, but I doubt it‘ll get any simpler than the underlying handful of grid declarations.

beardyw
1 replies
2d7h

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

Akronymus
0 replies
2d6h

The style attributes can get pretty long and hard to read. I personally prefer the approach of assigning it via classnames/ids, so that it's shorter in the html itself, along with being easier to switch out components. (Altough, I also use htmx, so that's another reason to go with classnames/ids)

Kristjan_Retter
1 replies
2d10h

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

yonatan8070
0 replies
2d8h

That's super cool! One thing that I noticed is that you can drag/push grid elements outside of the grid's boundaries, which is probably undesired

spiel24
0 replies
2d6h

Cool!

mediumsmart
0 replies
1d15h

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?

mansarip
0 replies
2d9h

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.

lovegrenoble
0 replies
2d1h

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

karmakaze
0 replies
2d2h

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.

jslakro
0 replies
2d8h

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

ericyd
0 replies
2d4h

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.

dnpls
0 replies
2d5h

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.

catapart
0 replies
2d3h

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.

atum47
0 replies
2d6h

Works really well on mobile. Nice job

alexliu518
0 replies
12h10m

cool

SandraBucky
0 replies
2d5h

Nice, Cool tool.