No Time Dad

A blog about web development written by a busy dad

How to Quickly Learn CSS Grid

The whole idea of quickly learning css grid layout is a little tongue in cheek. The truth is that css grid is very flexible, and usually with flexibility comes complication. There are a lot of edge cases and quirky things to know, and the truth is that you won’t be able to learn them all in any definition of the word “quick”.

I think the best strategy to learn css grid involves learning about what the “core” parts are and focusing on them. Later, you can branch out an learn about the edge cases and helpers that make working with css grid easier.

Learning and retaining what you’ve learned is achievable. I use a five step process that tends to work well for me, but in the end it’s really about how much time you have (and are willing) to put into learning something new.

Learning new things

  1. 1) Read and take notes in your own words
  2. 2) Step away for a while
  3. 3) Re-read your notes
  4. 4) Implement (create or write)
  5. 5) Repeat steps 1-4 as many times as you can tolerate (just once is fine too)

If it’s not clear already, this process is tedious. But I think the alternative of just jumping in and slogging through issues can often take more time. Not to say that you won’t have issues, but I think that having a baseline of knowledge heading into your implementation of a new concept will make dealing with the issues much easier.

Finding focus

It turns out that just adding display grid your stylesheet doesn’t do much. In fact, you’ll probably find that css grid has a lot of properties and values that are required to make it work. Some more important than others. I think figuring out which ones are the most important to get a basic layout is a great starting point for someone trying to learn css grid quickly.

I think there are two main focus areas you should start with when trying to learn how css grid works. Both of them can be used on their own to build a layout, but it’s not uncommon to see them combined.

Focus areas
  1. 1) grid-template-areas
  2. 2) grid-template-rows & grid-template-columns

Conceptually, I think starting with grid-template-areas is a good idea for most people who’re new to css grid. It’s easier to see the layout because it’s almost visualized for you in the css you write.

Below is an example of a two column and three row grid. You can see how the use grid-template-areas gives you a picture of the layout before it’s even rendered.

.main {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "nav main";
}

Once you’re comfortable with grid-template-areas, you can shift your focus to grid-template-rows and grid-template-columns. Then, work towards using them both together.

Learning to learn

In my opinion, the best strategy to learn css grid (or anything really) starts with pen and paper. I think writing down what you’re reading in your own words is very powerful. Obviously, everyone learns differently but I have always found that when I write it down I remember it better, especially later on.

So with that being said, here is a learning strategy I’d suggest starting with.

Learning strategy
  1. 1) Head to the MDN documentation for css grid and start reading the top level definitions for display grid.
  2. 2) Take notes in your own words as you read. Try to avoid diving too deep into all of the possible properties.
  3. 3) Repeat steps 1 and 2 but use the web.dev documentation for css grid instead. Don’t worry about repeating what you’ve already written, it’s perfectly fine and exactly the point.
  4. 4) Take a break for a bit (30 minutes to a few hours), then come back and re-read all of your notes.
  5. 5) Start building examples (more on this below)
Time to build

Now that you’ve got a basic understanding of css grid layout, it’s time to start building some examples and reinforce what you’ve learned.

  1. 1) Open your favorite editor and create an index.html file and a styles.css file.
  2. 2) Create a basic html structure
  3. 3) In the body element, create a four column four row (4x4) grid with 10 pixels worth of space between the grid items
  4. 4) Delete the index.html and styles.css files.
  5. 5) Repeat steps 1-4 again but this time create a three column three row (3x3) grid where the first row spans two columns starting from the first column, and the second row spans two columns starting from the second column.
  6. 6) Repeat steps 1-4 again five more times, but create your own unique css grid layout each time. For the fifth layout, try making your css grid responsive without using media queries.

Closing thoughts

You’ve probably noticed that this process is repetitive. I’m a firm believer that repitition is they key to learning a new concept, and retaining the knowledge long term. Yes, the process takes time up front but in the long you end up saving more time because the concepts have become more concrete.