Found a trick that finally made CSS grid click for me

I was stuck for like 2 weeks trying to get a simple 3 column layout to line up right in my project. I kept messing with widths and floats and nothing worked. Then I read this one post about using `grid-template-areas` with named sections and it just clicked. Has anyone else found that naming your grid areas makes it way easier to visualize the layout?

2 comments

2 Comments

paulc9315d ago

Yeah naming things is kind of like labeling your junk drawer, suddenly everything makes sense.

webb.christopher15d ago

@paulc93 basically hit the nail on the head with that junk drawer analogy. I spent a whole weekend trying to make sense of my grid code and it looked like alphabet soup until I named everything "header" "sidebar" "main" and "footer". Suddenly I could actually see the layout in my head without drawing it on a napkin. Still got my columns mixed up once though, realized I typed "sitebar" instead of "sidebar" and spent 20 minutes wondering why nothing moved.