CSS Grid Guide

Item

Each child element of a container is often called an item. You can see in the above example that I have given each item a class of item to illustrate this.

Columns and Rows

To define our columns and rows we need to use the properties grid-template-columns and grid-template-rows. As you can see in the example below grid-template-columns is set to 3fr 2fr 1fr. Here I am using fraction units(fr) to define the amount of space that each column cat take up. As there are only three columns I have only set three values. The first takes up half the width, second takes a third of the width and the last one takes a sixth of the screen. 

The value set for grid-template-rows is set to 30%. This will only affect the first row, setting its height to 30%. The rest of the rows will have an automatic height given to fill the screen. 

This is the most basic way to layout a Grid.  

Lines

With line numbers, you can set where your grid items start and when they end. As you can see in the example below item number 1 has a grid-column-start of 1 and a grid-column-end of 4. This means it will start at the left edge of the first item and will end at the left edge of the fourth item. Since our grid is only four items wide it appears to only cover three columns. This is expected. The other property you can see is grid-row-start and grid-row-end. These work in the same way but work from the top edge of the items working downward. You can see that the first items is starts at 1 and ends on three. This means it will cover two rows. 

Area

Another way to control the layout of the Grid is to use areas. These are defined areas that you can set via the grid-template-areas property. 

In the below example I have set up four areas called nav, main, aside and footer. These represent a typical layout you would see on an everyday website. Once you have declared your areas using the grid-template-areas property on the container you can then set up additional rules for each area by creating a CSS rule for adding the property grid-area with your predefined area name as the value.

Gap

We don’t want all of our items to be hugging one another so tightly. To give them a little breathing space we can add the grid-gap property to the container to just to separate them a little. 

Final product

As you can see in the below example you can easily manage the large sections of your layout with the Grid rather than having to use Flexbox. Flexbox will come into its own within each item of the grid as within these cells it will be one dimension.  

Which browsers support CSS Grid?

The browser support for this feature is great. One of the main questions I ask when it comes to support is will it work on older versions of IE and the answer is no. below IE 11 it will not work and even with that IE 11 has different syntax so it can be clunky to use. 

Lack of support would not stop me from using grid as you can easily write the CSS in a way that there is always a fallback layout. If a browser does not understand a CSS rule it will just ignore it. So before you set your grid CSS you might want to set it as a float layout and set a % width or if you are really brave you could a table layout. The choice is yours but I will not go into details about adding fallbacks. 

If you do need fallback you can check out this article by Rachel Andrew Grid “fallbacks” and overrides.

Resources

A Complete Guide to Grid

This is a complete guide to CSS Grid. This is my main resource for finding features that I have not previously used. I often have it open in one of my many tabs when doing initial layouts. 

Grid by example 

This is a great site that shows you in-depth examples of different use cases for CSS Grid. When learning about Grid at first this site was a lifesaver. 

CSS Grid by Wes Bos

If you have the time I can highly recommend this course by Wes Bos. It is totally free and is FILLED with quality content. 

Have any other questions about CSS Grid? Be sure to get in touch!

- Pete