CSS Grid - What is this Magic?!

A presentation at Female Coders Collective Perth in in Perth WA, Australia by Amy Kapernick

Amy Kapernick
@amyskapers

We’ve all heard a lot in the last year about a new advancement in the world of CSS, called CSS Grid. Starting at whispers, we’re now starting to hear it as a deafening roar as more developers write about it, talk about it and start using it. In the world of front end, I see it everywhere I turn, but what does it mean for non front end developers and why should you care about it?

The reason CSS Grid is gaining so much attention is because it’s a game changer for layouts. No longer do you have to fight for hours to align things properly on the page (eventually turning to Bootstrap), with a few simple lines of code we can now create dynamic and responsive layouts. While a lot of people are calling this the new “table layout”, CSS Grid gives us so much more (and is easier to use).

While there is so much to worry about when developing an app, CSS Grid means that you can worry less about building the layout on the front end, and more about making sure the back end works well. Let me show you how the magic works.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Code

The following code examples from the presentation can be tried out live.