CSS Grid

CSS Grid opens up a realm of possibilities for layout in pure CSS. This powerful feature brings true two-dimensional layout to the web for the first time, enabling developers to robustly control placement and sizing of elements in two axes. With fine-tuned control, we can get ever closer to the flexibility afforded in print media. And with intuitive placement mechanisms, we can handle unknown amounts of content with ease.

This half-day workshop with Melanie Richards from the Microsoft Edge browser team and the W3C CSS Working Group will get you up and running with CSS Grid, so that you can confidently use this new layout feature on personal and production projects alike. Bring any and all questions you might have about using Grid!

What will the workshop cover?

• This is Grid 101! We'll cover all the Grid properties, from creating the structure of a grid, to placing and sizing elements within it, to using some auto-placement and sizing magic.
• A bit of history about CSS Grid, as well as how to navigate the differences between the new standardized Grid syntax and the original prefixed syntax.
• Some strategies for dealing with browser support and delivering a progressively enhanced experience.
• Some cool things people have been making with Grid to get you inspired!

After an initial walkthrough, you’ll hack on a choice of project ideas using Grid. The instructor will be available for questions and to provide help if you get stuck. There will be time at the end of the workshop, so folks can share their experiments and learn from each other.

You'll come away with a new side project or code demo, ideas for additional ways to experiment with Grid, and a PDF of the instructional material.

What hardware/software do you need?

A laptop with your preferred code editor, and a browser supporting CSS Grid.

Who is the workshop for?

Designers and developers with basic working knowledge of HTML and CSS; familiarity with other layout approaches is great for context. No need to have prior knowledge about Grid, we’ll be starting with the basics. If you have experimented with Grid before, chances are still good you'll learn something new!

When and where is the workshop taking place?

On Monday, January 15th, from 1pm (13:00) to 5pm (17:00). Our venue is the new office space of Microsoft Germany.