In my most recent class assignment, I was introduced to CSS grid. I read articles by Jen Simmons on the topic and watched instructional videos by Rachel Andrew. As I read along and watched the examples in action, it seemed easy and straight-forward. It couldn’t get any easier than actually writing out exactly how you wanted divs to be laid out.

As I watched the tutorial videos assigned and followed along, I thought to myself, “ok, finally something I can do.” But as with all of my projects so far, it’s never as easy as it seems. I often tell myself that I have no idea what I’m doing. This project was no different.

I was tasked with redesigning the index page of my Discography project and do the same thing but using CSS grid. In the original assignment, I used Bootstrap.

It was easier to layout most of my page in CSS grid. It turned out I was already using the Holy Grail layout, and I didn’t even know it. Way to be original. So that helped a lot with positioning and naming my elements.

I struggled with getting my header nav links to align to the left and be responsive. I was able to accomplish that using a bit of flexbox. Part of the assignment was to add a feature query. I tried out the initial-letter rule to add a bit of flare to the band description in the center of the page.

Caniuse says initial-letter is a no-go on Chrome, but with the @support rule, it should be seen in Safari browser and be skipped over in other browsers that don’t support the feature.

I can say that by the end of the project, I had a better grasp on CSS grid and its capabilities. CSS grid and flexbox seem easier to use than Bootstrap, in my opinion.

Check out my design using Bootstrap – http://www.clorecreative.com/PanicDisco/index.html

Check out my design using CSS grid – http://www.clorecreative.com/cssgridpatd/index.html

Overall, can say I spent more time on the site using Bootstrap so it has a more polished look. But the CSS grid site took less time to put together. If I had to choose one or the other going forward, I think I would lean toward CSS grid and flexbox.