CSS Grid Layouts: A Quickstart Tutorial [+13 Tutorial Videos]

 

The new CSS Grid Layout System is the big brother of CSS Flexbox and, together with it, forms the future of how we will create web layouts with CSS. With a browser support of ~75% globally, it’s time to familiarize yourself with this technology — and let me tell you, it’s going to be fun!

CSS Grid Example

Let’s dive right in with a quick example of a grid created using the CSS Grid layout module:

See the Pen CSS Grid Layout – Example #1 by Peter Sommerhoff (@psomm) on CodePen.0

This example creates a grid with three rows of height 30px, 60px, and 40px as well as four evenly-sized columns. It only takes a single line of code to define this grid structure using the grid property, and the same goes even for more complex layouts.

But now let’s take a step back and talk about the principles of CSS Grids, which properties you can use, and what the differences are compared to Flexbox.

Creating Simple Grids

To use the CSS Grid system, you’ll first of all have to define the actual grid with its rows and columns. This can be done using grid-template-rows and grid-template-columns, and each row or column size is separated by a space:

See the Pen CSS Grid Layout – Example #2 by Peter Sommerhoff (@psomm) on CodePen.0

You can combine these two properties into one using grid-template, arriving at the same syntax that was used with the grid property in the first example where row and column definition are separated by a slash:

See the Pen CSS Grid Layout – Example #3 by Peter Sommerhoff (@psomm) on CodePen.0

Explicit and Implicit Grid

So what’s the difference between grid and grid-template? Well, the CSS grid layout system actually uses an explicit and an implicit grid — so far, we’ve only used the explicit grid, meaning all grid items were placed in rows and columns that were explicitly defined.

In short, grid-template is only used to define the explicit grid whereas grid can be used for either of the two. To see the implicit grid in action, let’s add more grid items to the grid than would fit into the grid cells defined by only the explicit rows and columns.

See the Pen CSS Grid Layout – Example #4 by Peter Sommerhoff (@psomm) on CodePen.0

As you can see, the CSS Grid system automatically generates a new row to encompass all items. By default, the height of implicit rows and columns is auto, which is why I added some text to the new divs to make them span more than 0px with auto height. You can override this default size of implicit rows and columns with grid-auto-rows and grid-auto-columns, e.g. grid-auto-rows: 50px.

Takeaway: CSS Grids automatically make sure than any items you place in them will render on the screen by generating implicit rows or columns on demand to contain them.

Arranging Items on the Grid

As you’ve seen, CSS Grid layouts will automatically fill in grid items row-by-row and from left to right (in ltr layouts).

So what if you want to define the position of some grid item explicitly or you want one to span 3 columns, or 2 rows? To do this, you can use grid-row-start, grid-row-end, grid-column-start, and grid-column-end. Don’t worry, you’ll learn a shortcut for these in a minute.

See the Pen CSS Grid Layout – Example #5 by Peter Sommerhoff (@psomm) on CodePen.0

This code puts “Item 2” into the second row and span columns 2 to 3. For this, it’s important to understand grid lines. Grid lines are basically the horizontal and vertical lines you would draw if you were to draw your grid on a piece of paper.

They get numbered from 1 onwards, so that grid-row-start: 2 means the item starts at the second horizontal grid line. Similarly, grid-row-end: 3 makes the item end at the third horizontal grid line, effectively placing the item in the second row. (Remember there’s a line above the first row and one left of the first column. These are numbered 1.)

As promised, there are shortcuts, namely grid-row and grid-column. With these, you can define start and end in one, again with a slash between them:

See the Pen CSS Grid Layout – Example #6 by Peter Sommerhoff (@psomm) on CodePen.0

You can condense this even further using grid-area but I wouldn’t recommend using it this way because it’s not very readable. With grid-area, you could define the above placement as grid-area: 2 / 2 / 3 / 4. In other words, row-start / column-start / row-end / column-end…not very readable. However, there is another absolutely amazing way to use grid-area.

Using Grid Areas

A grid area is any part of the grid that is surrounded by exactly four grid lines. Thinking about this for a moment, you’ll realize this could be a single grid cell, a row, a column, a 3×2 sub-grid, or even the entire grid itself. (Notice that the definition of four grid lines is also exactly how grid-area: 2 / 2 / 3 / 4 works and why that defines a valid grid area.)

This already shows that grid areas are a rather general concept, and thus allow defining any part of a grid that you may want to place an item into — and that’s exactly what we’ll use them for. The great thing and probably my favorite feature of the CSS Grid layout system is that you can give names to grid areas.

See the Pen CSS Grid Layout – Example #7 by Peter Sommerhoff (@psomm) on CodePen.0

Now that’s a powerful way to create layouts! What’s happening here? We have a 2×3 grid (2 rows, 3 columns) and with grid-template-areas, we define three grid areas called a, b, and c. Plus, we also define which cells each of those should span. Then, we use grid-area on the grid items to assign them to one of the above grid areas, placing them in exactly that part of the grid that we wanted.

To let this sink in and understand its power, let’s look at this more real-world layout resembling a whole web page that uses grid areas:

See the Pen CSS Grid Layout – Example #8 by Peter Sommerhoff (@psomm) on CodePen.0

This code is so much easier and faster to create than any float-based layout, plus it’s also more readable and understandable for other developers.

Well, actually I made it a little harder for you to understand it at this point to because I introduced two new concepts in this example:

1. I used the combined syntax to define both the grid areas and the row/column sizes in grid-template. You can do this but feel free to keep them separate if you find that more readable.
2. I used the fr unit which stands for “fraction” or “fractional”. Basically, 1fr is one chunk of remaining space in the grid. Thus, giving all columns a size of 1fr distribute the remaining space equally between them — and since there are no fixed-sized columns, remaining space = grid width. This is the easiest way to create any number of equally-sized columns.

CSS Grid vs Flexbox

So at this point, you may be wondering how CSS Grid and Flexbox work together. Does CSS Grid make Flexbox redundant? Do they complement each other? Do you have to learn both?

First of all, none of the two supersedes the other. So yes, you should absolutely learn both of them — for your own sake, it’s fun and it makes your job a lot easier. CSS Grids and Flexbox really do complement each other, and I couldn’t express their relationship any better than Tab Atkins did in the www-style mailing list at W3C:

Flexbox is for one-dimensional layouts – anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together).

Grid is for two-dimensional layouts. It can be used as a low-powered flexbox substitute (we’re trying to make sure that a single-column/row grid acts very similar to a flexbox), but that’s not using its full power.

Flexbox is appropriate for many layouts, and a lot of “page component” elements, as most of them are fundamentally linear. Grid is appropriate for overall page layout, and for complicated page components which aren’t linear in their design.

The two can be composed arbitrarily, so once they’re both widely supported, I believe most pages will be composed of an outer grid for the overall layout, a mix of nested flexboxes and grid for the components of the page, and finally block/inline/table layout at the “leaves” of the page, where the text and content live.

I think it’s obvious that CSS Grid layouts are in a way “superior” to Flexbox because it allows creating two-dimensional layouts whereas Flexbox focuses on one-dimensional layouts. Of course then the question becomes: in how far is Flexbox superior to single-row and single-column grids?

In short, Flexbox is just even more flexible when it comes to one-dimensional layouts and, once both are well-known by developers, using Flexbox will also implicitly convey that you’re creating a linear layouts as opposed to a grid layout. Apart from that, as Tab Atkins described, linear grid layout are designed to work similar to Flexbox.

Taking It Further

This was a quick dive into CSS Grids but there is much more to discover in the specification. To take it to the next level, there are several resources I can recommend:

• If you want to learn all there is about CSS Grids, join my Ultimate CSS Grid Course: From Beginner to Advanced
• For an interactive and fun way to learn the basics, check out CSS Grid Garden
• If you’re interested to learn more about CSS Flexbox, check out my online course: The Complete Flexbox Tutorial: Learn Flexbox in 2017

You can also watch the first few lessons of my course on YouTube to see if you like it:

 

The same also goes for my Flexbox course:

 

I’d love to welcome you inside one of my courses. Let me know if you have any questions about them, or any questions about CSS Grids or Flexbox in general. Thanks for reading (and watching)!