Visualgui 2020 Iteration 3.1: Editorial Layout

I was flipping through the recent issue of Time magazine and came across a layout that caught my eyes. I love the photo treatment. The layout is simple yet striking. As a result, I wanted to adapt it for this blog.

Using CSS Grid, I played round with combining text and photo. I can divide the layout in half or make the image takes up two third. I can use grid template areas to switch the placement of the image. I really like the flexility CSS Grid provide. The best part is that the photo only shows up on large screens via media query. Small screens only get text layout. The photo does not download on mobile devices. I do not want to waste reader’s data.

I haven’t used photography on my blog for a while and I have been wanted to bring it back. I am pleased with this direction. It took me about half an hour to accomplish this. I really love CSS Grid.