An introduction to CSS Grid

Written by Matt Brooking: Web Developer.
· 4 minute read

Websites have been using grid based design for years now. Unfortunately, there’s never been a great way to actually create these designs, due to the limitations of both HTML & CSS.

In the past we would have to use HTML Tables(rigid, unresponsive and just generally awful), CSS Floats (Unresponsive and basically broken, requiring clearfix hacks to work properly).

The introduction of Flexbox was a big step forward. A responsive and powerful layout module, which made controlling the layout of objects much easier. However still not entirely fit for purpose, when thinking about a full website template. Flexbox only allowed you to control one dimension of flow for your content.

CSS Grid is a much better solution for template design. Allowing you to control the flow of each element both horizontally and vertically, the sizes of your elements, the spaces between your elements, all while being responsive.

So what is CSS Grid?

CSS Grid Layout (CSS Grid), launched in 2016 and officially supported by most major browsers in 2017, is a powerful new method of creating a complex multi-dimensional layout.

CSS Grid is a grid based layout system which allows you easily create page templates and layouts with a combination of both rows and columns, and doesn’t rely on the use of positioning or floats. It is relatively similar to how HTML Tables function but a lot more flexible.

Before we start:

CSS Grid isn’t the be-all and end-all of solutions for front-end development.

CSS Grid is not supported by IE 11 or IE 10, you will still need provide IE fixes and fallbacks. A full scale CSS Grid layout, like the examples I’m about to go through, are not really possible until you can be sure that virtually none of your users are using older browsers.

Flexbox is not obsolete either. While CSS Grid could technically do everything Flexbox can do, they are solutions for 2 different problems, and you will find that CSS Grid is an unnecessary tool, when all you want is a row of evenly spaced images.

The Basics

Grid works similarly to Flex. When you set an element to display:grid all immediate child elements become a grid element and will respond to the properties you set.

Grid uses a combination of rows and columns to build up your template.

grid-template-columns controls the columns, and grid-template-rows controls the rows. With these new CSS properties we set the size and number of columns/rows we want to have.

Here is a really simple example, of a 3×3 grid. I’ve set the grid to display 3 equal columns and rows.

If we want to have an equal size for all columns and/or rows instead of laboriously typing out the same thing 12 times can use the repeat() shorthand. grid-template-columns:repeat(3, 1fr);.

The fr unit is a new CSS unit used with grid, which means that cell should use part of the available space. 1fr means to use 1 part of the available space. We can use it in combination with other units such as px, rem or %. The great thing about the fr unit is that no matter how many rows or columns we decide to use, the correct size will always be calculated to fit in our grid, so we could have 5, 10 or 20 columns and fr will always fit exactly.

In the following example, we have set the columns to be 35%, 40px and 1fr. This means the first column of the grid will be 35% of the container width, 40px explicitly, and the final column will fill whatever space is left. You can also set multiple fr units. so for example grid-template-columns:5fr 2fr 1fr will set the first column to fill 5 parts of the space, the second to 2 parts of the space and the final to one part of the space.

grid-column-gap and grid-row-gap are fairly self explanatory, theu set the spacing between each column and row, but keeps the spacing within the grid only. So no more messing around with negative margins and black magic to get your container to line up with everything.

Grid Templates:

Grid Templates define a template which is set by using specific grid areas to create a layout. With grid-template-areas we can create complex layouts for our page.

Here’s an example basic blog post layout. Created using grid.

We begin by create our rows and columns in the same way above. Defining how many rows and columns our layout should have. Define our grid areas using grid-area in our child elements, and then organise grid areas in grid-template-areas

Grid template areas will correspond with the set columns and rows.

grid-template-areas:
"header header header"
"article article sidebar"
"related-1 related-2 ."
"footer footer footer";

Each string of text creates a row, and each set grid area creates a column. grid-template-areas must correspond with your defined columns and rows. So a row must have the same number of columns as declared in grid-template-column. Each cell you declare with a grid-area will be filled with that area. So on first row of the template where declared "header header header" the header grid area will fill the width off 3 columns. A full stop ("related-1 related-2 .") means to leave a gap.

And that’s basic usage. You can do a lot more with CSS Grid to make super powerful and flexible layouts with the various functions available to use such as minmax(). The helpful folks at CSS Tricks have created a fairly comprehensive guide to CSS Grid and the trusty Mozilla Web Docs provides everything you need to get a full understanding of how everything works.