12 ms·

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

Kristjan_Retter 2y ago
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 2y ago
  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
robxorb 2y ago
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.
- afloatboat 2y ago
  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-ze3IngcdAc2xKG&si=sTz_CvpyhRXuz4Ih 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/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://flexboxfroggy.com/ https://flexboxfroggy.com/ Is a good way to introduce yourself with the concepts of flexbox.
  - ffsm8 2y ago
    And this one is for the grid https://cssgridgarden.com/ https://cssgridgarden.com/
  - deleted 2y ago
    [deleted]
- zadokshi 2y ago
  I’ve always used “flex” layout for this. I’m not sure what is considered normal.
  - Brajeshwar 2y ago
    Grid lays out the structural layout, while Flex lays out the content ordering and positioning.
  - danielvaughn 2y ago
    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.
- 6510 2y ago
  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/ 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 2y ago
    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`.
- tgv 2y ago
  MDN 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 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
- promiseofbeans 2y ago
  Caniuse (https://caniuse.com/ 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.
- deleted 2y ago
  [deleted]
- robxorb 2y ago
  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 https://developer.mozilla.org/en-US/docs/Web And, for checking compatiblity and common practice: https://caniuse.com 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!
mansarip 2y ago
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.
ldehaan 2y ago
[dead]
jslakro 2y ago
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 https://youtu.be/rbSPe1tJowY
AlexDragusin 2y ago
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 2y ago
  You might want to give browser/platform info.
- bduffany 2y ago
  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)
ghosty141 2y ago
Have you thought about open-sourcing the code for this page? I'd be curious how you made this. Works really well!
- yupyupyups 2y ago
  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 2y ago
    Preface the URL with "view-source:" on mobile. Example: view-source:https://cssgridgenerator.io/ https://cssgridgenerator.io/
    - yupyupyups 2y ago
      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.
memset 2y ago
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 2y ago
  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.
  - lysp 2y ago
    > 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 2y ago
    SPACER GIFS!!! Ahahahaha, good ol days :D.
  - replwoacause 2y ago
    I grew up on spacer.gifs
beardyw 2y ago
Isn't it odd to have class div1 div2 etc. Isn't that what the style attribute is for?
- Akronymus 2y ago
  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)
endofreach 2y ago
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 2y ago
  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.
deleted 2y ago
[deleted]
spiel24 2y ago
Cool!
atum47 2y ago
Works really well on mobile. Nice job
SandraBucky 2y ago
Nice, Cool tool.
emadda 2y ago
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/ https://cssprinciples.com/3/grid/
- dylan604 2y ago
  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 2y ago
    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.
dnpls 2y ago
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.
ericyd 2y ago
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.
catapart 2y ago
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.
karmakaze 2y ago
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.
lovegrenoble 2y ago
Interesting tool, even better than mine, for FlexBox CSS: https://flexboxcss.com https://flexboxcss.com
mediumsmart 2y ago
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?
alexliu518 2y ago
cool

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 2y ago
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

robxorb 2y ago

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.

afloatboat 2y ago
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-ze3IngcdAc2xKG&si=sTz_CvpyhRXuz4Ih 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/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://flexboxfroggy.com/ https://flexboxfroggy.com/ Is a good way to introduce yourself with the concepts of flexbox.
- ffsm8 2y ago
  And this one is for the grid https://cssgridgarden.com/ https://cssgridgarden.com/
- deleted 2y ago
  [deleted]
zadokshi 2y ago
I’ve always used “flex” layout for this. I’m not sure what is considered normal.
- Brajeshwar 2y ago
  Grid lays out the structural layout, while Flex lays out the content ordering and positioning.
- danielvaughn 2y ago
  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.
6510 2y ago
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/ 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 2y ago
  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`.
tgv 2y ago
MDN 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 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
promiseofbeans 2y ago
Caniuse (https://caniuse.com/ 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.
deleted 2y ago
[deleted]
robxorb 2y ago
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 https://developer.mozilla.org/en-US/docs/Web And, for checking compatiblity and common practice: https://caniuse.com 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!

mansarip 2y ago

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.

ldehaan 2y ago

[dead]

jslakro 2y ago

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 https://youtu.be/rbSPe1tJowY

AlexDragusin 2y ago

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 2y ago
You might want to give browser/platform info.
bduffany 2y ago
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)

ghosty141 2y ago

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

yupyupyups 2y ago
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 2y ago
  Preface the URL with "view-source:" on mobile. Example: view-source:https://cssgridgenerator.io/ https://cssgridgenerator.io/
  - yupyupyups 2y ago
    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.

memset 2y ago

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 2y ago
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.
- lysp 2y ago
  > 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 2y ago
  SPACER GIFS!!! Ahahahaha, good ol days :D.
- replwoacause 2y ago
  I grew up on spacer.gifs

beardyw 2y ago

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

Akronymus 2y ago
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)

endofreach 2y ago

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 2y ago
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.

deleted 2y ago

[deleted]

spiel24 2y ago

Cool!

atum47 2y ago

Works really well on mobile. Nice job

SandraBucky 2y ago

Nice, Cool tool.

emadda 2y ago

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/ https://cssprinciples.com/3/grid/

dylan604 2y ago
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 2y ago
  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.

dnpls 2y ago

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.

ericyd 2y ago

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.

catapart 2y ago

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.

karmakaze 2y ago

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.

lovegrenoble 2y ago

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

mediumsmart 2y ago

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?

alexliu518 2y ago

cool