I’ve spent some of the last couple of days working on styling DTC. I have limited experience with design, and if I look at just about anything long enough, I can’t tell whether it looks good or bad anymore.

At this point, I don’t know if what I’ve done looks bad, but it certainly looks nicer than the completely unstyled site that it has been so far. It looks more like someone put some thought into it. At the very least, everything has its own space, and it’s responsive.

As I’ve said before, I’m easily persuaded, and this time, it was this video that convinced me to use CSS Grid and dive headfirst into the newer methods of laying out pages. I watched the video again to get the keywords to use, and I was on my way.

And then I was immediately stuck. It didn’t work. I didn’t understand what I was doing. So I read more at CSS-Tricks. I still didn’t get it, so I checked out examples from Grid by Example. It still wasn’t working until I got to Redefining Grid Areas with Media Queries.

Suddenly, it worked perfectly. Just define your grid areas with names in grid-area, and tell them where to go in the parent by literally creating a grid with those names with grid-template-areas. No need to worry about telling each row and column where to start and stop–and for the mobile section, it’s just a list of area names in the order you want them to appear. Amazing.

And then, for no apparent reason, I started understanding the rest of it. What hadn’t been working previously was working now. It must have been something I was doing wrong, but I still have no idea what that was. It was like I had been tapping on an egg, trying to get inside, and as soon a small crack appeared, I was able to get to the egg effortlessly.

It happened when I decided I wanted to make my input fields align with each other, rather than the jagged placement based on the length of each one’s label. For that, I decided I would learn Flexbox. Again, initially it made no sense. But once I started to grasp the concepts behind it, the styling began to flow.