My two projects for today's IndieWebCamp Austin were 1) write stuff and 2) mock up a CSS Grid photo gallery. I want to use my site to, you know, actually write stuff more often. I have a couple posts in progress and I thought having several hours today would be a good opportunity. One of those posts is about my recent trip to Israel. I intend to publish a bunch of photos at the same time, so I wanted to work on adding photo galleries to my site.
I ended up spending most of the day on the CSS Grid photo gallery, but I am quite pleased with the result. I did finish in enough time to write this post, so technically I succeeded on both projects!
The photo gallery is responsive and I can change how many rows/columns in the grid an individual photo takes up by changing a class name. At lower resolution, it uses 2 grid columns. At higher resolutions, it uses 4 grid columns. IE11 does not support CSS Grid but does support Flexbox, so my next step will be to add some Flexbox fallbacks.
Responses★ Chris McLeod, Eddie Hinkle,
I really like the look of the sample gallery! I might have to steal some of it for my own site! 😁