Grid areas and the element that occupies them arent necessarily the same size.

That's a good little thing to know about CSS grid.

I'm sure that is obvious to many of you, but I'm writing this because it was very much not obvious to me for far too long.

Let's take a close look.

There are two players to get into your mind here:

1. The grid area, as created by the parent element with display: grid;
2. The element itself, like a <div>, that goes into that grid area.

For example, say we …

Grid areas and the element that occupies them aren’t necessarily the same size. is a post from CSS-Tricks