CSS Grid Layout is a new way of thinking

I watched this video by Rachel Andrew today. In it, she describes the differences between Flexbox and CSS Grid Layout and demonstrates a listings layout with Grid. Even though I feel I’m reasonably up to date with Grid Layout, after watching the video, I’ve still a lot to learn. And I realise that I need to retune my thought processes.

In particular, I like the approach in the video where a grid of 12 columns is established, the use of Firefox Grid Inspector, and the layout that was used as an example. Oh, and responsiveness without using media queries. Also, using Grid Layout for overlaying grid items over an image and styling posts (listings) according to post format/style class are two things that were new to me.

• More: Here’s Jen Simmons’ video explaining the Grid Inspector tool and some neat Grid Layout image gallery examples.

As a result of the above, I can see a few ways to use Grid Layout better in this site. My first small steps are hardly touching the surface. You have to start somewhere though!

CSS Grid Layout is a game changer

I’ve alluded to it above but I’m finding that Grid Layout is a new way of thinking. I began this site thinking about CSS in the same way I normally do (for example, very much “item out”) but, with Grid, I’ve realised that I need to re-educate my brain.

Grid works from the container in — Rachel Andrew

Simon Cox is also thinking differently.

Overall, Grid Layout is a game changer for me.

Learning things

Just a final point about this site. Building it from the ground up like this without a framework, without a third party system, is slower for certain, and I don’t want to do it on every client project. Yet, it’s been good for me. I feel like it’s given me more time to learn. This site is a ‘side project’ and perhaps that releases the ‘pressure’ of budgets and time frames.

OTH, it has been slower progress than I planned. However, I’m enjoying it, and that’s the main thing.