Excellent Adventures in CSS Grid

So yesterday I did a thing. I gave a talk called “Kirsty’s Excellent Adventure in CSS grid.” at Milton Keynes Geek Night.

For anyone who may not know, MK Geek Night is an awesome evening event held every 3 months in Milton Keynes. It has a stirling reputation and is super successful, so it was a complete honour to be allowed to come along and talk about CSS stuff. I truly, had a fantastic evening and I would highly recommend going if you ever happen to be in the area.

Anyway, I wanted to be one of those super cool people that had a blog post that both published and tweeted the link to the post automatically, as soon as I finished on stage, but sadly, I was not that organised.

So better late than never, here are my slides for my talk about CSS Grid.

Something I didn’t mention in my talk that I really should have done, is that, as well as all of the reading materials I linked to, I also created a CodePen Collection for this talk that includes all of the examples as well as a few other experiments.

You can find that here: https://codepen.io/collection/AvJKoR/

If you don’t want to skip through the slides for all of the reading materials here is a complete list for you:

MDN

• Basic concept of Grid Layout
• Relationship of Grid Layout
• Using Named Grid Lines
• repeat()
• Using CSS custom properties (Variables)
• order

YouTube

• Jen Simmonds Layout Land: Flexbox vs CSS Grid
• Wes Bos CSS Grid Course

Other

• CSS In Real Life – What the (fr)action
• CSS In Real Life – Practical tips working with CSS Variables
• Andy Bell- Create a responsive grid layout with no media queries
• CSS Grid Garden – A Game for Learning Grid
• Smashing Magasine: A strategy guide to CSS custom properties
• Source order matters

CSS Tricks

• A complete guide to Grid
• The fr Unit
• How the minmax() function works
• Super-powered Grid components with CSS Variables
• Everything you need to know about CSS variables
• CSS Grid in IE: CSS Grid and the new autoprefixer
• CSS Grid in IE: Debunking common Grid misconceptions

Rachel Andrew

• Flexible sized grids with auto-fill & minmax()
• Should I try to use the IE Implementation of Grid Layout
• Grid, content re-ordering and accessibility

If any of you reading this attended the event, I hope you enjoyed the talk. I would like to deliver this talk again so if you have any feedback I would love to hear it 🙂