Learn CSS Grid

by

Note: This post was originally written as a letter to an individual needing help from Reddit.  Since it was originally written (in March 2018), much has changed in the CSS Grid world.  Many more resources have been created.

I have completely rewritten this post, to make it easier to maintain, and to be more complete.

Sorry, it took me a few days, but I haven’t been able to write a blog post. So I will just give you the links and sequence that I have studied them. They are all free.

Opening paragraph of original post. 

CSS Grid (the Subject)

Learning CSS Grid should now be the de facto way CSS layout is taught. But it is only one part of effectively working with CSS. Other sub-subjects include: Typography, Animation, Images and Accessibility (Just to name a few.)

The assumption is, “If you’re here, you see a value in learning about CSS Grid”. However, just in case… CSS Grid is a newly adopted CSS syntax for positioning and laying out your elements for a web page and therefore, website. It allows for more creative control and ensures that website authors can communicate their message in the most effective way without being hampered by previous constraints in the CSS language.

Furthermore, CSS Grid now allows for clearer, more concisely written code making the stylesheets and code more maintainable. An added bonus to using CSS Grid and having less code is faster loading web pages.

Learning Orientation

This post is organized into several different sections to help categorize and reference the resources and information.

HTML and CSS basics

Reviewing the basics for HTML and CSS isn’t a bad idea. Here are a few resources to take a look at.  You could go through each of them, but probably one will be enough to ensure a basic understanding.

Algonquins Design, a group from Canada, has an excellent six part web developer course. Only “Web Dev 1” is needed to understand the basics to get into writing CSS Grid based layouts.  I recommend doing all six parts at some point in your learning path.

Mobile First is still Mobile First

Mobile-First Responsive web design is the idea that that we design our websites with a mobile device as the primary design point.  What this means is that we deliver assets and the least amount of weight (with regards loading times) as the standard.  Then as the devices get bigger, as is normally the case also the bandwidth speed – we add more design elements but only for those bigger devices.

A good little primer on Mobile First Design by JustInMind.

An excellent resource on the theory of Mobile-First with practical examples. UXPin on Mobile-First Responsive Design.

Starting any website design starts with the content and organizing it for mobile first. You put this content in source order within your HTML page.

Then you design the mobile version CSS and graphics, expanding upon the design as the content shifts. We load heavier assets on faster WiFi.
Mobile-First and Responsive Web Design are not the same things, but are related. Mobile-First means you implement your design as a Mobile version and then use media queries as the viewport expands.

Responsive Web Design means your website is coded once and responds to the viewport width.

This little section about Mobile-First is to get you to think primarily about how to create your HTML and the source order of your content.  Source order is the physical coded order of which elements go where and when.  This is important for accessibility, and semantic meaning.  But also on mobile, the experience is very different – it’s basically stacks of content.

CSS Flexbox and CSS Grid

CSS Flexbox is CSS that has been more broadly implemented across browsers. There are some overlap features and functions between CSS Flexbox and CSS Grid. I recommend using Flexbox as a first choice where it is possible.  CSS Flexbox and CSS Grid work very well together, nested and otherwise.

Educative (a learning website) offers a free Understanding CSS Flexbox course.  This is a great starting point. A more advanced CSS Flexbox Tips and Tricks by the same author.

You can get more practice and develop muscle memory for CSS Flexbox with the Flexbox Froggy game.

Wes Bos created a Flexbox video tutorial series.  I recommend taking this Flexbox Course after the previous two links. He calls it, “What is Flexbox“.

A few CSS Flexbox references and resources

Scotch.io, a learning platform, has an excellent Visual Guide to CSS Flexbox properties.

CSS-tricks.com, as usual, has my favorite Guide to Flexbox.

CSS Grid Basics

The CSS Grid Garden game. Practicing and gain muscle memory for the basic CSS Grid syntax and thought process.

CSS Grid Courses

A 10 video course by Rachel Andrew to getting you started with CSS Grid. If you study nothing else.  Study this.

Another high-quality CSS Grid Course by Wes Bos. This CSS Grid course covers the basics well, but I feel a little familiarity with CSS Grid is better, prior to starting the course.

Traversy Media gives you a 30 minute CSS Grid overview in this video.

CSS Grid References and Cheat Cheats

This cheat sheet helps you to visualize the CSS grid when you’re trying to figure out the syntax.

Another CSS Grid tool/cheat sheet that helps you create code.

Another excellent CSS-tricks resource.  This on the Guide to CSS Grid.

FreeCodeCamp offers another reference for CSS Grid.

More resources and a free CSS Grid Builder. (I don’t think you should use the Grid Builder as CSS Grid syntax is already concise and you should just finish going through these resources until you really get it.)

A different curated list of resources for learning CSS Grid, compiled by Rachel Andrew.

Wes Bos’s CSS Grid course was the first course I took that he offered.  I am a huge fan of his show, Syntax.fm.  He has a quick-paced teaching style. I don’t actually recommend this course for newer coders.

His course is definitely a stop on your journey.  Aside from CSS Grid, you get a very modern word flow and toolset.
I found this tool useful to have in the background when I was learning and practicing various syntax for CSS Grid. It reaches its limits as you start with real content.

I recommend playing around with it until you no longer need it.

Of course you need to practice.

CSS Grid practice

Jen Simmons gives you fifteen exercises to learn CSS Grid.

An excellent Silo Creative article giving magazine type layouts the CSS grid treatment with explanations and examples.

More examples of layouts made with CSS Grid.

Jen Simmons let’s use explore various unique layouts using CSS Grid.

CSS Grid Layout practice

A CSS Grid tutorial for a simple web layout.

Quackit, a learning resource for Web Dev, published a couple dozen CSS Grid layouts and their code to learn and practice from.

Rachel Andrew’s Grid by Example has layouts and coding examples for CSS Grid. This is the site that started it all (with CSS Grid).

A walk through and tutorial/explanation for a tricky but simple looking web page layout using CSS Grid.

An almost great tutorial for complex CSS Grid layouts.  I include it because I feel it is important and needs to be taught.  Unlike most resources on this list, this one is not spoon feeding you.

This very excellent tutorial on How to build a Complicated CSS Grid. I wish more articles and tutorials applied the theory to a real design like this tutorial.

CSS Grid and Flexbox

A website page dedicated to showing Flexbox fallback techniques when CSS Grid won’t work (on older browsers).

Specific CSS Grid applications for learning

Centering with CSS Grid, and older methods compared to each other.

Rachel Andrew once again solves (and explains) how to have an element break out of a CSS Grid column.

Rachel Andrews shows techniques to create columns with content that overflow the edges without complicated CSS or hacks. 

I implemented these techniques for images on my website. But on several different planes.  Not only these images, but the white stripe.
David Geddes, the creator of the game Grid Critters, shows us a necessary skill to use when laying out different size images. I didn’t list his game as a resource as it’s a paid game of amazing creativity.

You may be interested in playing the game and using it to master your CSS Grid skills. 

A short tutorial on CSS Grid and a mobile-first approach to a design with CSS Grid.

An excellent article and walkthrough on how to layout a design using CSS Grid.

Another one by the previous author, Bryan L Robinson, CSS Grid for a simple fluid Card Grid.

Another walk through using CSS Grid to build a card component.

Excellent tutorial for learning CSS Grid by making a simple calculator.

A responsive footer using CSS Grid and no media queries.

Make a photo gallery with CSS Grid.

Another tile layout article using CSS Grid.

A codepen exmaple of making an Instagram layout using CSS Grid.

How to style an empty CSS Grid cell.

Advanced CSS Grid

In this section, I have listed resources that I recommend after getting a good handle on CSS Grid.  This section comprises of articles and explanations regarding the finer points of using CSS Grid.

A look and explanation about start and end lines within CSS Grid and CSS Flexbox.

A nuanced look by Ethan Marcotte about the fr unit in CSS Grid.

Supporting older browsers and using fallbacks for CSS Grid.

This article gives a possible solution, and various exceptions, for using an Autoprefixer to help with backward compatibility and CSS Grid.

A freecodecamp.org explanation of different aspects of CSS Grid.

Using CSS Grid to make CSS Variables + CSS Grid

Another look at CSS Variables and CSS Grid.

Using pseudo elements and CSS Grid. This is eye opening.

A thorough explanation regarding the possible techniques and choices using CSS Grid including accessibility concerns.

Using CSS Grid in a React component.

A thorough look about using CSS Grid and supporting older browsers by Smashing Magazine.