[HN Gopher] Show HN: I made a drag and drop CSS grid generator
___________________________________________________________________
Show HN: I made a drag and drop CSS grid generator
Author : Kristjan_Retter
Score : 208 points
Date : 2024-07-13 07:44 UTC (15 hours ago)
(HTM) web link (cssgridgenerator.io)
(TXT) w3m dump (cssgridgenerator.io)
| Kristjan_Retter wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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.co
| m/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.
| ffsm8 wrote:
| And this one is for the grid https://cssgridgarden.com/
| zadokshi wrote:
| I've always used "flex" layout for this. I'm not sure what is
| considered normal.
| Brajeshwar wrote:
| Grid lays out the structural layout, while Flex lays out the
| content ordering and positioning.
| danielvaughn wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| MDN has complete pages on all features, including their
| compatibility, and decent introductions:
| https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
| promiseofbeans wrote:
| 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.
| robxorb wrote:
| 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!
| mansarip wrote:
| 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.
| jslakro wrote:
| 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
| AlexDragusin wrote:
| 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 wrote:
| You might want to give browser/platform info.
| ghosty141 wrote:
| Have you thought about open-sourcing the code for this page? I'd
| be curious how you made this. Works really well!
| yupyupyups wrote:
| 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 wrote:
| Preface the URL with "view-source:" on mobile. Example: view-
| source:https://cssgridgenerator.io/
| memset wrote:
| 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 wrote:
| 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 wrote:
| > 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 wrote:
| SPACER GIFS!!! Ahahahaha, good ol days :D.
| replwoacause wrote:
| I grew up on spacer.gifs
| beardyw wrote:
| Isn't it odd to have class div1 div2 etc. Isn't that what the
| style attribute is for?
| Akronymus wrote:
| 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 wrote:
| 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 wrote:
| 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.
| spiel24 wrote:
| Cool!
| atum47 wrote:
| Works really well on mobile. Nice job
| SandraBucky wrote:
| Nice, Cool tool.
| emadda wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Interesting tool, even better than mine, for FlexBox CSS:
| https://flexboxcss.com
___________________________________________________________________
(page generated 2024-07-13 23:01 UTC)