Loading…
20
TIL named grid lines changed my whole layout game after 5 months of fighting auto placement
Last week I finally ripped out every grid-template-areas block in my portfolio site and switched to named lines instead. I had been using areas for like 5 months because every tutorial said it was the easy way, but my cards kept landing in the wrong spots whenever the content changed size. A dev friend in Austin looked at my code for 20 minutes and said 'just name the lines, dummy.' I tried it on a simple 3 column gallery first and everything lined up on the first try, no row-span math, no guessing. Now I can drop items anywhere with grid-column: content-start / full-end and it just works. I redid my whole header, sidebar, and footer in about 40 minutes. Has anyone else moved away from grid-template-areas, or am I late to this party?
1 comments
Log in to join the discussion
Log In1 Comment
patricia38519d ago
My buddy Jake did the same thing last year and would not shut up about it for weeks. He kept saying the row-span math was driving him crazy too, like he would change one card's text and the whole grid would shift on him. He finally named his lines and said it felt like taking off a heavy backpack, everything just sat where he put it. I mean I still use areas for super simple two column stuff because it reads nice, but for anything with cards that change size he is 100 percent right. Maybe it's just me but the areas thing only works when your content never moves, and how often does that happen.
7