CSS Grid - Layouts and animations

My Thao Nguyen

Espen Hellerud

Half-day workshop - in English

Creating modern web pages is not a simple task. Not only does your layout have to be on point, where all elements must align themselves perfectly to all screen sizes, but you must also support all kinds of devices and browsers. To overcome this challenge you might be familiar with the feeling of drowning in infinite nested flex boxes. What if I told you there is another option?

CSS Grid is a layout system which lets you organise your elements by using a grid - based on rows and columns defined by yourself. The elements can also overlap if you want them to. On top of that, CSS Grid can really shine when it is combined with flexbox or animations, leading to endless possibilities when creating your web page. Web developers tend to avoid CSS Grid because of the lack of support in Internet Explorer, fear not! We have example solutions for how to support IE11 too!

In this workshop, you'll get an introduction to CSS Grid. We will start with the very basics of creating a simple Grid and when we are done you will be able to create responsive web pages for all devices! After mastering clean and usable layouts we will explore how we can spice things up by also including animations.

Primarily for: Developers, Others

Participant requirements: Laptop with an editor (VS code, intellij, whatever you prefer) with node.