Been seeing a lot about CSS Grid on Twitter, decided to fix some smelly HTML/CSS on my portfolio using it!

It seems like I’ve settled into a learning process. As with learning Vue.js and learning sketch-noting, I started with content.

In this case it was this article on CSS Tricks, it went over the basics of CSS Grid and how to use it.

.container { }
.item {  grid-column-start: <number>;  grid-column-end: <number>;  grid-row-start: <number>;  grid-row-end: <number>; }

With this much alone I was able to begin using the Grid for what I needed. I didn’t need to go over grid-template-areas, grid gaps and item alignments. Although they would be really useful.

Instead I needed this CodePen found in the article:

I began working in my own CodePen and didn’t define my grid properly so I went to an example to see how they had done it.

Once I figured it out I went on to finish recreating the layout. That became v1, which you can see here:

Basic html and css

Next I needed to animate the images like on my Portfolio. I copied over the Javascript and attached the necessary Javascript files (jQuery and Paroller) to make the parallax effect.

This became v2 which is here:

Finally, I needed to make it responsive just like on my website. This is the real reason I wanted to update using CSS Grid. In the current version, I have additional HTML tags which I hide and show for mobile and desktop. I no longer wanted that extra HTML and CSS.

I began with removing the display: grid from the container and then followed through adjusting all the other elements.

And just like that. We have our completely old website with a brand new grid layout system. And by golly was that easy and pumpkin pie. The grid system is awesome for sure.

This is the commit where I make the move to the Grid System. In the HTML, I’m able to reduce 40 lines of code and in the CSS, I’m able to reduce ~11 lines.

Especially in the HTML, I was able to reduce a lot. Honestly it speaks more to the terrible HTML I had before than to how great the Grid System is, but either way, I was able to fix the issue that I had!