Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: