Unlocking the Power of CSS Grid Layout

A presentation at Webconf.asia in June 2018 in Hong Kong by Rachel Andrew

Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.

In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing. Rachel will show you practical ways in which a little bit of knowledge in these areas can unlock the full potential of the Grid Specification. You’ll learn how to create useful components and to start thinking of ways in which you can solve design and interface problems in more creative ways.

Code

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

Buzz and feedback

Here’s what was said about this presentation on Twitter.