Introduction to CSS Grid you may have missed — Part 1

Filip Cieślik
8 min readDec 9, 2020

--

Introduction

On October 17th 2017, Microsoft’s Edge browser shipped its implementation of CSS Grid. You may think that it was something completely irrelevant but in fact, it was a milestone for many reasons.

First, all major browsers started supporting this layout tool.

Second, all main browsers introduced and deployed their implementations in a single year — a great example of cross-browser collaboration.

Third, all developers gained a new and very powerful tool for creating responsive layouts without being concerned about browser support.

What will you learn?

In this series of articles, I would like to show you the most crucial features of CSS Grid. What is more, in the third part I would like to code a simple gallery page with CSS Grid.

The article does not cover all the topics, but the idea behind it is to help you get writing your own pages/designs/blogs/you-name-it as soon as possible.

If you think this is not enough to start coding, just have a look at the Pareto Principle. In short, sometimes 20% of the input lets you assert 80% of the outcome.

And, of course, a quote — as every good article has at least one.

“Progress isn’t made by early risers. It’s made by lazy men trying to find easier ways to do something.”

Robert Heinlein

I highly recommend using Mozilla Firefox Developer Edition that has great support for CSS Grid visualization (including implicit and explicit grids).

Mozilla Firefox Developer Edition

Boring specs and terminology

The CSS Grid is quite complex. Perhaps, even more complex than Flexbox (here I will pause, and express my opinion that it is still good to use Flexbox for simple layouts and that CSS Grid is not a replacement for it).

However, let’s start with basic terminology to better understand everything.

The CSS Grid is declarative

When you think of declarative API you may think as well of ReactJS. Websites, SPAs have evolved into massive and difficult layouts that are either hard to code or maintain across multiple device types. The CSS Grid eliminates the process of creating these layouts dependent on media queries or the device type. It replaces all with a set of declarative rules.

Part of Grid documentation:

/**
* Define the space for each grid item by declaring the grid
* on the grid container.
*/

Grid container

Most of the available websites and web applications are built with ‘boxes’. These boxes are placed in a specific order and within some boundaries.

Photo by Tirza van Dijk on Unsplash

In the CSS grid context, a grid container (box) is a parent that holds grid elements (other boxes). It also defines the placement of grid lines (both horizontal and vertical).

How to define a grid container?
In order to use it, you need to add a grid display property to the HTML element. Once applied, you will have a block-level box on this element and any direct children will fall into grid formatting context. This means they will start acting like grid items, rather than block/inline elements.

On the example below you may notice standalone text ‘Am I a grid item?’ that is not wrapped with any HTML tag.

It is worth mentioning that CSS Grid will turn it into a grid item as well, so in the example, below we have 4 grid items (children).

And how it looks in Firefox dev tools:

Grid container visualization in Firefox

Here is how it looks in the browser with the Firefox Overlay Grid option enabled:

Grid container

Horizontally placed numbers are grid lines that define columns (in that case only one column that starts with 1 and ends with 2), and vertically placed numbers that represent the start and the end of each row.

More about them you will find in the next point. Dashed lines represent grid-gap property between rows.

Stackblitz demo:

https://stackblitz.com/edit/web-platform-vp8dxy

How to define columns and rows?
To create rows and columns within a grid container, you have to use these properties:

grid-template-columns and grid-template-rows

grid-template-columns defines the number of the explicit columns, and grid-template-rows defines the number of the explicit rows. Once you set values into these properties, they will create row and column tracks within the grid container.

Check the below example:

This will create 3 new columns (100px width each) and 3 new rows (100px width each).

Grid rows and columns visualization in Firefox

Explicit vs Implicit grid container

If you place more items than you have available cells in your grid, or when an item is placed outside of the explicit grid, the container automatically generates tracks by adding lines. The explicit grid together with these additional implicit tracks and lines forms the so-called implicit grid.

Check the below example:

Our grid has only three explicit rows. The fourth item is placed into the automatically generated grid track and it takes the height of the content. For example: if div.item4 has a height of 50px, then the automatically generated grid track will have the same height.

Grid container auto-generated tracked (in purple)

Grid line

In the example below, I created a Grid Container with three items (children) in it. By default, all items are placed in rows (you can change it by applying grid-auto-flow: columns or grid-template-columns: 1fr).

Grid lines are the horizontal and vertical lines that divide the created grid. These lines define rows and/or columns, dependent on grid items.

Here is how it looks with Firefox Development visualization (grid lines in purple):

Grid container

Grid cell

A grid cell is the smallest unit in the grid layout. As you may have already noticed, a grid cell is defined by four grid lines.

Here is how it looks with Firefox Development visualization (ITEM 1):

Grid cell in the browser

and with Firefox dev tools (in purple):

Grid cell in the Firefox dev tools

Grid area

A grid area is a field that covers at least one grid cell. It is possible that the whole grid area will cover the entire grid.

In the example below, the area covered by eight cells is also a grid area.

Grid area

Note that grid-area is a shorthand property that specifies a grid item’s size and location within the grid.

Grid track

Try to think of the grid track as a space between two grid lines (either in a row or a column). You can also name them as you want or start using grid tracks based on area name, by adding a proper suffix (e.g. if the area is named content you can define track between content-start and content-end).

Here is how it looks with Firefox Development visualization:

Grid tracks

Fractional units

One of the most crucial things when learning CSS Grid is to understand fractional unit (shorthand — fr). This unit eases the pain of calculating percentages of space taken by each item.

Let’s have a look at the below example to better understand this concept:

Stackblitz demo:

https://stackblitz.com/edit/web-platform-xetdup?file=index.html

And here is how it looks with Firefox Development visualization:

Fractional units

Note that you are NOT bound to just whole numbers!

In the example above, the total fraction is 1fr + 2fr + 1.5fr + 0.5fr = 5fr.

If the parent container width equals 1200px then:

1fr => 1fr/5fr * 1200px = 240px

2fr => 2fr/5fr * 1200px = 480px

1.5fr => 1.5fr/5fr * 1200px = 360px

0.5fr => 0.5fr/5fr * 1200px = 120px

With fractional units, a lot of flexibility was introduced. Make sure to use them in order to start laying out contents with the CSS Grid layout.

Most people think that fractional unit divides grid column or row into equally spaced areas. This is not true in all of the cases. Let’s have a look at another example:

And a quick glance at the spec:

The fr unit fills up the available space BUT it is NEVER smaller than the minimum size of the grid container or the content of the row or column.

It means that in case of any image or grid item with min-height/min-width property, you may encounter some unexpected results by applying fr.

Grid template areas

This is quite a declarative and visual way of creating your layout. Let’s have a look at the code:

Check stackblitz demo:

https://stackblitz.com/edit/web-platform-sc1ukg

Here is how it looks with Firefox Development visualization:

Grid template areas

Each section in quotes is a row and each word represents a column. Dot “. “ stands for an empty grid cell, and it can be repeated. Spaces are not relevant and you can play around with the format.

If you are using prettier or any other formatting plugin it would be a good idea to suppress the grid-template-areas code fragment, so it won’t be changed while formatting.

This is useful in case of any layout changes in terms of media-query or the device that is being used.

Media query for grid-template-areas

Here is how it looks with Firefox Development visualization:

Grid template areas

Naming lines

When you are working on a complex grid with many rows or columns it may get complicated to place your items in proper grid cells. Named lines are an alternative solution for this problem.

There is a simple layout with multiple columns and rows. Each item is assigned to a column/row number:

Stackblitz demo:

https://stackblitz.com/edit/web-platform-26fx9b?file=index.html

Here is how it looks with Firefox Development visualization:

Naming lines

Now the same example with named lines:

It looks the same in Firefox Development visualization. Currently, named lines are not being displayed in another way.

Notice that each name of the line is defined in the brackets:

grid-template-columns: [start] 1fr [middle] 1fr [middle-end] 1fr [end];

You do not have to name all the lines of each column or row. You can name only those that are significant or important for your layout, like the start or end of columns.

Summary

That’s all for this part. I hope that by the end of this article the basic terminology will no longer be ambiguous for you.

In the next article, I would like to cover the most crucial functions of the CSS Grid.

Thanks for reading and keep coding!

--

--

No responses yet