Simple Named Grid Areas

I think of named grid areas in CSS Grids as bring-your-own syntactic sugar. You don't absolutely need them (you could express grid placement in other ways), but it can make that placement more intuitive. And, hey, if I'm wrong about that, correct me in the comments.

Say you set up a 3-column grid:

.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns:
200px 1fr 1fr;
}

No rows defined there; those are implicit and will appear as needed. We could define them, …

The post Simple Named Grid Areas appeared first on CSS-Tricks.