Hacker News Reader

Comment by reactordev | Hacker News Reader

CSS Grid is a mistake. Baking in a design philosophy when we had really creative pages without it.

I like grids for pages with content and documentation and such. I don’t like grids for pages of media or other creative content. Cards, flex box, grids, these are all design framework choices and shouldn’t be in CSS spec. We were totally fine with position relative and media-query centric widths and heights. I get that it’s easier to standardize if grids are part of the standard but I miss the days of pages having some creativity in their design. Every site looks the same nowadays.

And before I get downvoted. I have a degree in graphic design. I love CSS and I love the web. Bring back the fun.

View on HN

Sure what was wrong with table layouts and spacer gifs anyway amirite?

I’m a designer who codes, and CSS Grid has completely transformed (and simplified) my approach to responsive web design, and enabled much more complex layouts as a result. Just because a layout was possible before doesn’t mean it was easy.

By all means do things the old way if you want, but to suggest that it would be better if it didn’t exist is insane.

Not that it wouldn’t exist. It just wouldn’t be part of the spec. You are free to declare your own grid.

I’m also not advocating to bring back tables and invisible spacer gifs. We have margins and padding for that. Even borders…

CSS grid makes it possible to implement wrapped content that is uniformally aligned with the last row keeping the same number of columns as the others, and have that scale correctly to different page widths. This is useful in things like book layouts. You can get close with flex, but the last row doesn't fully work.

Does it require a ::last-child hack to get working? I’m a fan of grids when it comes to heavy writing content like I mentioned but I still don’t think it should all be packed in the spec.

No, just:

    main.books {
        display: grid;
        grid-template-columns: repeat(auto-fill, 180px);
        grid-gap: 1rem;
        justify-content: space-between;
    }

That will make the child items 180px wide, repeat as many children in a row as needed to fill the width with a gap of atleast 1rem extended so that the items are justified to the left and right and are spread evenly. The last row has however many children are left with those children positioned to match the rows above.

See https://stackoverflow.com/a/46099319.

I meant without CSS Grid.

Ah, ok. I wasn't able to get the last row working right with flex, but didn't experiment too much as the CSS grid approach worked. You could look through the other answers in that StackOverflow question.

I have. It’s a mix of people saying it’s can only be done with CSS grid semantics and then a few who prove them wrong with flex box. Reinforcing my above question about “why not :after? :last-child? And flex it into shape?”

But I get it. Grids are easy to grok and grid.css is for the birds. Bake it in. Bloat the spec. And allow pixel perfect precision with one (or two) less div.

It was "fun" when tinkering with some really creative special concern, it was an insufferable pain when your job was finding ways to layout all the "fun" designers envisioned who weren't highly familiar with CSS.

Before position and float madness and all, we used to abuse tables -- because layouts for complex information do work best in grid systems. Now CSS finally has a module that serves this purpose, and brings a huge amount of flexibility to make formerly painful stuff easy.

I'm not even talking about "page layouts" as a whole, just simple particle patterns like "a big icon with a title + description to it's right" is so so much cleaner and easier to do in markup AND css with grid.

Embrace the tools, and if you dislike them - you may as well just not use them. But thinks like grid make simple, stupid, deadlined webdesign _work_ so so much less of a grind.

(speaking as a General Graphic Designer who's also been deep, deep in CSS since before 2.1)

Reply on news.ycombinator.com