My IndieWebCamp Austin Demo

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.

Props to Michelle Barker for this great article which helped me a lot in setting up an aspect ratio CSS Grid.