CSS grid generator
Dev tools
css layout generator
SHOW HN2024
How HN took it
8 positive, 5 neutral or asking, 0 mixed, 5 critical, out of 18 comments about the project. Thread score +0.21.
Execution: 1 for, 5 againstIdea: 3 for, 0 againstPerformance: 1 for, 0 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Helpful for learning CSS grid syntax and visuals.
From 3 comments
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…
mansarip on HNNice 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…
emadda on HNReally 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.
ericyd on HN
Simple, good UX, works well on mobile.
From 2 comments
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.
ericyd on HNWorks really well on mobile. Nice job
atum47 on HN
Objections
Boxes can be dragged outside the grid boundaries.
From 3 comments
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,…
AlexDragusin on HNI 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…
bduffany on HNThat'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
yonatan8070 on HN
Layout is not responsive to window resizing and rows misalign.
From 1 comment
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)…
dnpls on HN
Column count above 12 parses incorrectly.
From 1 comment
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…
karmakaze on HN
Requests
Open-source the page code.
From 1 comment
Have you thought about open-sourcing the code for this page? I'd be curious how you made this. Works really well!
ghosty141 on HN
Store grid state in the URL so layouts can be shared.
From 1 comment
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,…
catapart on HN
Questions
Why use divs instead of semantic elements?
From 1 comment
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…
mediumsmart on HN
Why use class names like div1 instead of inline styles?
From 1 comment
Isn't it odd to have class div1 div2 etc. Isn't that what the style attribute is for?
beardyw on HN
Alternatives named
Tailwind Grid Generator by the maker.
From 1 comment
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…
Kristjan_Retter on HN
FlexboxCSS (flexboxcss.com) for flexbox.
From 1 comment
Interesting tool, even better than mine, for FlexBox CSS: https://flexboxcss.com
lovegrenoble on HN
CSS Grid Garden and MDN guides for learning grid.
From 2 comments
And this one is for the grid https://cssgridgarden.com/
ffsm8 on HNMDN has complete pages on all features, including their compatibility, and decent introductions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout#guides
tgv on HN