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)