Web design learning notes

Making layouts with CSS Grid

A short introduction to a powerful CSS tool for arranging content into clear, flexible page layouts.

About the tutorial and presenter

This page was built to feature a video “Learn CSS Grid the easy way” by Kevin Powell. Powell is a educator and web designer known for teaching CSS through his YouTube channel, specializing in mostly front-end web development, which includes more than a thousand CSS videos, which is a LOT! He has also worked as a web designer as well, but has made a living by teaching web design, and has taught more introductory classes about web design overall. You can read more on his about page.

The concept: CSS Grid

The CSS Grid is a pretty unique layout system that allows you to organize elements in various rows and columns. By declaring a container as a grid, you can control the column sizes and overall spacing, then place its child elements into that structure. This makes it useful for common designs such as card collections, galleries, and full-page layouts.

Grid is especially helpful when a layout needs to manage both dimensions at once: columns and rows. Instead of relying on awkward spacing or positioning, you describe the relationships between areas, and the browser handles the arrangement. It can also adapt to smaller screens with flexible track sizes and media queries.

Watch the tutorial

If the embedded player is unavailable, open the tutorial directly on YouTube.