A Complete Guide to CSS Grid | Hacker News Reader

A Complete Guide to CSS Grid

css-tricks.com

195 pointsBrajeshwar28 comments

An Interactive Guide to CSS Grid

https://news.ycombinator.com/item?id=38388842

You'd think one could think of simpler & more intuitive naming of CSS properties for layouts.

I've used CSS for many years, but somehow I still have to look up basic property names & values from time to time. I don't really have this issue with programming languages. And I find it easier to memorize Tailwind classes for some reason.

This tradition is probably borrowed from RFCs.

OAuth itself might be plenty simple but oh the naming.

And if you're coming from SAML, they renamed all the concepts.

I have this bookmarked and have been using it for approximately the last five years. There's a similar one for flexbox [1].

[1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Yeah, this is the one I pull up when I need a reference or a quick refresher. When it's been awhile, I play quick run through of the grid garden game: https://cssgridgarden.com/

Same! I even have them framed behind my screen where I can peek from time to time. Even after so many years, I can't remember which ones are "justify" and which ones are "align", lol.

I normally just set display: flex on an element and then use Chrome’s dev tools. You can click on an icon next to the declaration and it brings up a UI with all the flex alignment properties.

These two are the ones I refer to every time when I have to decide which of the {justify,align}-{items,content} naming disaster to use.

Pretty sure this is the main reason these are so popular.

Glad to hear I'm not the only one who forgets what those things are called! There was a time when CSS fit in my head, but those days are gone.

There is a great Hacker News comment from this year out there somewhere explaining exactly where the complexity in CSS comes from, if only I can find it again.

unanticipated usecases?

Is it that CSS is complicated because the problem it solves is complicated?

The problem of layout is not nearly as complicated as the spaghetti mess of code presented in this article implies.

Isn’t it self-imposed complexity most of the time?

Not sure what you mean. The problem set of machine layout across devices and designs is vast and complicated. There are simpler solutions sets, or solutions that simplify by limiting options, but I'm a staunch defender of CSS as an adequate, even elegant, solution to the entire problem. Again, I believe that CSS is complicated because the problem it attempts to solve is complicated. Every solution that is presented as simpler is simpler because it limits options.

Margin system incompatible with boxing. Poor borders and outlines. No general classes for hierarchies because of selector overlap. Non-strict containment. Chaotic size request/allocation rules. No relative-to sizing and positioning. No scroll target margins. Resistance to add obviously popular features for decades.

The main problem with css is that with all its complexity it underdelivers and so requires various, incompatible, non-reusable and fragile hacks to make it work.

You didn’t mention specific features, but I assume it’s media queries. That’s unrelated, css is broken at its core.

Every solution that is presented as simpler is simpler because it limits options.

Every other layout solution I’ve used had infinite options due to trivial programmability on top of basic functionality, which wasn’t as poor as css’s and was closer to “get job done” because it was made for it and not as an afterthought.

Anticipating “but they can’t wrap at width breaks!”. Yes, these were never targeted at low-width portrait screens, but that’s not the point. Css sucks long before the “responsive” keyword hits requirements.

Sorry, I don't understand your criticisms. "Margin system incompatible with boxing"? "Non-strict containment"?

No, layout is not trivial. However, the approach CSS has taken to solving it is unnecessarily complicated compared to the complexity of the problem. It is without a doubt the most complicated, worst system I've ever seen for layout. Once upon a time I was writing GUI apps using Xt and Motif: that made more sense than CSS does.

Hmm. I once felt that way, but changed my mind after I dug in and really learned it on its own terms.

i bet it has interesting and insightful comments

It makes it sound so simple, but it seems predicated on having a fixed viewport. What happens when I resize my browser screen, or I am viewing on mobile? It is not clear how to make the layout adapt to a portrait, square or landscape orientations.

Media queries and different grid layouts. It's a lot easier than flex when it comes to responsivitiy.

A-Z list of css guides by css-tricks.com https://css-tricks.com/almanac

I thought everyone was using flexboxes. In what cases would a grid be preferable?

Flex for one dimension and grid for 2 dimensions.

It's fun to see css-tricks again here. After the ...

IMHO The best An Interactive Guides

Flexbox https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

Grid https://www.joshwcomeau.com/css/interactive-guide-to-grid/

Reply on news.ycombinator.com