Introduction to CSS Grid you may have missed — Part 1
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).
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.
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:
Here is how it looks in the browser with the Firefox Overlay Grid option enabled:
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).
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 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 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):
and with Firefox dev tools (in purple):
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.
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:
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:
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:
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.
Here is how it looks with Firefox Development visualization:
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:
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!