Yesterday, I started building a simple page that display some components with CSS grid. I followed the style guidelines and came up with this:

What I Learned

It was good time working on CSS grids and playing around with other layouts. I have used CSS grid before but not so much using the grid-template-areas property. If you are a visual learner like I am, I found using grid-template-areas helpful.

First you set your grid, then columns and rows. Here I have three columns and two rows:

Then you place your divs (or other elements) by setting them up as placeholders in grid-template-areas using their class names like this.

Note that you don't have to use the element class names for these placeholders. But it makes it easier to remember when you are setting up your elements later.

A way to understand this is looking at the entire property value as the grid itself.

You're not done yet! Now you have to actually set the elements in their placeholders using the grid-area property.

And finally you get...

How This Will Help Me

One of the things I love about programming are the different ways people code up a component. I think that a person's personality can shine through in their code and seeing different solutions to get the same results shows this. What I like about CSS is that it provides a person with different options in achieving their frontend goals!

This exercise encourages me to thoroughly look for other ways and options I might not know is available to me.

Onto the next challenge!