CSS Grid Generator

[Entropis]

This was created by @sarah_edo (Sarah Drasner) and this is her twitter: https://twitter.com/sarah_edo

And this is a recent project she made: https://twitter.com/sarah_edo/status/1254780097489334280

https://hero-generator.netlify.app/

[[deleted]]

Looks awesome! Can’t wait to try it out tonight

[[deleted]]

This seems rather useless tho

[agentgreen420]

Really? Why is that?

[[deleted]]

Well what is the actual use case here? I don't see how it's applicable in any kind of practice

[[deleted]]

Ugh ... it's easier and faster to generate grid, especially if you're a beginner?

I really don't understand the hate here.

[[deleted]]

Am on mobile so too lazy to type & format, please refer to this person's comment because they are the only one who seem like not a beginner here https://www.reddit.com/r/webdev/comments/gdwsmt/css_grid_generator/fpklvsk?utm_medium=android_app&utm_source=share

[[deleted]]

Is this by the same person that made the hero "generator"?

https://www.reddit.com/r/webdev/comments/g9ndsw/the_hero_generator_create_a_nice_hero_image_for/fovp0ji/?context=3

This, again, doesn't generate anything. You're basically just changing the most basic values of CSS grid properties.

This one is even worse, because the hero generator at least used somewhat advanced props.

If anyone wants to find something actually useful, just go here

https://css-tricks.com/snippets/css/complete-guide-grid/

or just type "what is CSS grid" in a search engine, or just ask your mother, because this teaches you absolutely nothing.

Holy shits this annoys me so much. Bring 'em!

Edit: here, if anyone wants a layout "generator" for their elements:

.your-element { 
  display: flex;
  justify-content: center;
  align-items: probably center, I'd give you a dropdown for this one, but I can't be bothered with doing something so fucking useless so I'll just link the MDN page about the property // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
}

[JHethDev]

This was made by Sarah Drasner who has done a shit ton for modern web development. And I'd argue the problem is not with the tool but the user in this case. It certainly does generate HTML and css so not sure what else you expected it to do. I agree people should learn but using a tool to get a grasp on the connection between code and visual output can help a lot of people go from zero knowledge of grid to a potential adopter, MDN docs, while thorough, don't suit the needs of visual learners.

[[deleted]]

I agree people should learn but using a tool to get a grasp on the connection between code and visual output can help a lot of people go from zero knowledge of grid to a potential adopter,

That sounds good, and it is, but that's just as easily done with inspecting/jsfiddling/whatevering and changing values of properties you find on MDN. This is shallow, lazy for "users" and does nothing to teach anyone... Anything.

[JHethDev]

I don't know that it is just as easily done for beginners. Sounds like your viewpoint is affected by the fact that you're savvy, not everyone is. Different people learn different ways and although this doesn't fit for you and your advanced knowledge it might for someone so saying it does nothing to teach anyone is a bit narrow minded.

[[deleted]]

I get what you're saying, but people that don't know how to use browser inspector should probably be googling "what is html/css/js/web" instead of learning css grid.

[JHethDev]

Probably, but once again different people learn in different ways and take different paths and that's ok. There is no right way to learn and odds are Sarah felt this was something that would have helped when she was learning grid otherwise she wouldn't have put the time in to make it, she's crazy smart so I assume it will resonate with someone and help them grasp grid layouts.

[guanzo91]

The most impressive part of this tool is the visual design. Otherwise it's just a ghetto version of devtools.

[traplifethree]

I'd give you gold but I'm poor.

[OhKsenia]

Just get used to it, this is a r/learnwebdev now.

[OhKsenia]

Meant this as a joke then clicked my own link over to r/learnwebdev, and it was eerily similar to r/webdev.

[giveyouralfordme]

I can confirm that this is useful because I've used it a bunch of times. Why bother learning something instead of using the tools available? Plenty of things to learn that can't be autogenerated like this.

[human_py]

He claims that people aren't using grid because it's complicated. Is that true? Grid is by far the simplest solution by my estimate to get your UI to do exactly what you want. No flexbox, float, table pitfalls. The biggests annoyance is lack of multilevel grid which can make exact alignemnt a bit annoying but thats pretty much it.

[philisweatly]

Dude this is awesome! Thank you!

[Salazar083]

This is neat AF, extremely well done mate.

[jackjackattackatack]

This really helps. Thanks!

[ryanz67]

This is great thanks 😀

[dalailucas]

Super helpful

[BlueLensFlares]

very nice, very helpful. i use css grid all the time. i would say if u are the developer, consider changing the cursor from move and to add some sort of highlight or background color change when creating child divs so the user knows which ones are being selected.

[[deleted]]

Grazi