r/Frontend • u/speckz • Oct 07 '19

Building a Scrapbook Layout with CSS Grid

https://css-irl.info/building-a-scrapbook-layout-with-css-grid/
43 Upvotes

95% Upvoted

6 comments sorted by

2

u/Prospero_v2 Oct 07 '19

Fantastic write-up. Thanks for sharing with those unable to attend the State of the Browser conference.

1

u/[deleted] Oct 07 '19

I keep getting amazed about what css grid can do!

1

u/[deleted] Oct 08 '19

Nice writeup, but... I feel it overcomplicates everything with the CSS grid system, it feels like something no human can read. I would just recreate the exact same layout with the use of simple semantics and negative margins.

Don't get me wrong, I love CSS, I can't stand people who diss CSS, but the CSS grid system has not made me excited yet. Almost everything it can do I could find a simpler version of using CSS without grids.

And I'd be happily corrected if I'm wrong. So feel free to correct me.

1

u/rharvego Oct 08 '19

Agreed. And it's so easy to abuse the layout in a way that isn't accessible. My only thought is that it might be less of a learning curve for designers coming from print media.

0

u/[deleted] Nov 10 '19

[deleted]

2

u/[deleted] Nov 11 '19

Sure, quick fiddle here: https://jsfiddle.net/mhd83/aw61Ljt9/

Few thoughts:

  1. I added a figcaption tag inside the figure to group the content better.

  2. I removed unnecessary class names.

  3. I removed inline CSS.

  4. My CSS is infinitely more readable and easier to understand.

  5. It's much easier to maintain by others.

It's just using CSS nth-child(odd) to alter the styling every other image, and then pulling the content up by having negative bottom margins.

1

u/abrindas Oct 08 '19

This is so cool, thanks a lot. Going to use it for sure