The Ultimate Guide To CSS Grid

You can follow me on Twitter where I post my Medium tutorials.

Here’s a list of my best web development tutorials.

Image for post
Image for post
CSS Grid Anatomy is composed of the primary container which is just your standard <div> element that has a margin, border and padding. To make a parent CSS grid container out of any element add display: grid to it. Grid’s items are children nested inside the parent container. They are usually defined as a list of elements that could represent a header, sidebar, footer or similar website layout elements, depending on your application design.
div#grid {               /* This is our CSS grid parent container */
display: grid;
grid-template-columns
: 100px 100px 100px 100px 100px; /* 5 cols */
grid-template-rows: 100px 100px 100px 100px; /* 4 rows */
}
Image for post
Image for post
Some of the first things you will notice about the CSS grid behavior.
Image for post
Image for post
Using grid-auto-flow: row or grid-auto-flow: column to determine flow direction of the grid’s items.
Image for post
Image for post
Image for post
Image for post

Implicit and Explicit Content Placement

But what happens if we add one more item to the list?

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Automatic Spacing

CSS grid offers a few properties to automatically stretch its cells across variable / unknown amount of space. Here are the key examples for both column and row auto flow cases:

Image for post
Image for post

CSS Grid Gaps

Talking about CSS grid you can’t escape talking about gaps. Gaps are the horizontal and vertical spaces between grid cells.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

FR units (Fractional Units)

Fractional (fr) units are unique to CSS grid.

Image for post
Image for post
Image for post
Image for post
Behavior of fractional units (fr unit) changes based on all values provided in either dimension.

Fractional Units And Their Relationship To Gaps

Space defined using fractional units changes based on gaps. The same 1fr within the same parent will shrink to a smaller size when gaps are added:

Image for post
Image for post
Here we added gaps to cells specified using fr units.
Image for post
Image for post

Content Placement

We’ve just dissected the CSS grid anatomy. Hopefully you get a better idea of how CSS grid structures content. But now we need to get creative and actually place some items inside it. How it’s done might modify default behavior of the CSS grid. We’ll explore how this happens in this section.

Cell Content Spanning

You can span an item across multiple cells.

Spanning using grid-column and grid-row

Using grid-column and grid-row properties on the item element itself:

Image for post
Image for post

Spanning using grid-column-start…

…grid-column-end, grid-row-start and grid-row-end you can specify actual starting and ending points across which you want to span cell content.

Image for post
Image for post
Type these properties directly into the item you wish to be affected by them.

min-content and max-content

The values min-content and max-content are supplied to grid-template-columns or grid-template-rows properties just like any other size-related value (for example px, 1fr, etc.)

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Images and max-content

I placed the image of this blue rose into the cell.

Image for post
Image for post

Content Positioning

Up until this point we’ve talked about Grid’s structure in general.

Multi-directional 360° float

I don’t think CSS Grid specification calls it that. But, indeed it is possible to create exactly that… a 360-degree floating behavior.

Image for post
Image for post

Align Self (align-self)

This property helps you position content vertically.

Image for post
Image for post

Justify Self (justify-self)

This property helps you position content horizontally.

Image for post
Image for post

Template Areas

Template areas are defined using grid-template-areas property.

Image for post
Image for post
Image for post
Image for post

Practical Example of CSS Grid Template Areas

We now understand how to block out rectangular areas. Let’s take a look at a potentially real-world scenario. Here I’ll demonstrate a very basic layout.

Image for post
Image for post
Each color coded area is named template area. You only need 1 element for its content.

Naming Lines

Instead of always referring to lines by their number, you can also name them. This way they will be easy to remember for stretching items across multiple cells. Numbers can get tedious!

Image for post
Image for post
You can also name lines (gaps) with grid-template-column or grid-template-rows property!

In Conclusion

CSS Grid is a comprehensive subject. Hence, this is not a complete CSS Grid tutorial on how to build actual CSS layouts. I simply used one example for each separate part as a starting point for someone new to the grid.

Get My Coding Books — Limited Time Offer

The diagrams in this tutorial were influenced directly by the manuscript!

You can also follow me on Twitter where I post my tutorials.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store