The Ultimate Guide To CSS Grid

During the last two months I’ve been taking a deeper look into CSS Grid. In this tutorial I want to share the key findings. To make things easier, I explained them using visual diagrams.

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

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 */
}
Some of the first things you will notice about the CSS grid behavior.
Using grid-auto-flow: row or grid-auto-flow: column to determine flow direction of the grid’s items.

Implicit and Explicit Content Placement

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

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:

CSS Grid Gaps

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

FR units (Fractional Units)

Fractional (fr) units are unique to CSS grid.

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:

Here we added gaps to cells specified using fr units.

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:

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.

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.)

Images and max-content

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

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.

Align Self (align-self)

This property helps you position content vertically.

Justify Self (justify-self)

This property helps you position content horizontally.

Template Areas

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

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.

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!

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.

Limited Time Offer

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

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