Pro tip: I saw a talk where the speaker used grid-template-areas for a whole site layout and it clicked
I was watching a video from a conference last month, and the speaker built a full page layout in maybe five minutes. They didn't use any numbers for columns or rows at first, just named areas with grid-template-areas. They literally wrote out 'header', 'nav', 'main', 'sidebar', 'footer' in a visual block in their CSS. It looked like a simple map. Then they placed items by just setting grid-area on the elements to match those names. I've always used fr units and line numbers, which gets messy when you want to move things around later. This felt so much cleaner for planning. I tried it on a small project for a local bakery site, and rearranging the sidebar from the right to the left was just changing the map, not recalculating a bunch of grid-column values. Why don't more tutorials start with this method for beginners? It seems way more intuitive.