How to build and animate a basic drawer using CSS Grid

So over the last couple of months I’ve been learning as much as I can about CSS Grid so I can produce a course on it. This course will be a follow up to a Flexbox course I have already produced a course in Flexbox (see course here if interested).

As part of my research I wanted to see what we could animate using CSS Grid. To which I found I could build a nice looking drawer feature.

Now at the time of this article, support for animation in CSS Grid is limited. There is slightly better support in Firefox, but it’s not much better. With that said in this article I will show you two ways to animate in a drawer. One will work with Firefox only, but I feel will be the ideal way of doing this down the track, and the other way is more backwards compatible with browsers today.

Getting Started

So to start, create a simple HTML file. I will call mine simply index.html. Then add the following HTML to the file.

The important thing to note here is the main element. It contains an aside and…