DEV Community

Cover image for A Quick Introduction to CSS Grid
Gabe for AMP Agency

Posted on • Updated on

A Quick Introduction to CSS Grid

CSS Grid is the heaven-sent answer to all those pesky workarounds developers have had for laying out grids on webpages for years. Rather than having to deal with tables and floats - we now have this amazing, two-dimensional layout tool, which allows us to control all aspects of our rows and columns, at the same damn time. You can do so much with CSS Grid, and in the right hands, it almost seems like magic. So for all my junior developers out there who are looking to let go of their precious bootstrap framework and need a quick lesson in CSS Grids, this post is for you. Let's kick it off by learning two key terms:

Grid Containers

The first step to setting up your grid is to define your grid container. A grid container, houses and establishes and your grid. The container sets the grid formatting context and manages how its direct child elements are spaced, sized and aligned.

Grid Items

Grid items are the direct children of a grid container. Any element inside a grid container is considered a grid item.

Building Out a Grid

We're going to start off by creating and setting our grid container. In our HTML document let's create a div element with six paragraph elements inside of it and give it a class name of my_grid.

Now in our CSS, we can set the 'my_grid' class to be a grid container using the display property.

Columns and Rows

Let's define some columns and rows - to do so, we can use the following CSS properties: grid-template-columns and grid-template-rows. I'm going to define two columns and three rows and will set all of their widths and heights to be 1fr like so

For those that may not know, the new fr unit represents a fractional unit. By setting grid-template-columns to be 1fr 1fr I am creating two columns in my grid, and telling both of them to take up one fractional unit of the available space.

Here are the results of our grid so far.

We can easily change our grid simply by adjusting the width of the rows/columns or by adding more of them.


Gutters are the spaces or gaps between the rows and columns of your grid. To define your gutters, we can use grid-column-gap and grid-row-gap.

Alternatively, you could use grid-gap by itself. With grid-gap you can give it two values - the first being the rows gap value, and the second being the columns.

Keep going

Easy stuff, no? If you enjoyed reading this brief introduction on CSS grids, I highly recommend you continue learning about it. CSS Tricks has an amazing guide you can study up on to master the grid. Jen Simmons also published a post to some great resources for learning CSS Grid. A big thank you to Max, a developer here on for showing me another great resource after publishing this post - Grid Garden, an awesome interactive way to learn CSS grid.

Enjoy, friends!

Discussion (4)

steelwolf180 profile image
Max Ong Zong Bao

There's this youtube content creator called "Chris Hawkes" that I constantly watch videos from introduced CSS Grid Garden that teaches a very cool and interactive way to learn CSS grid.

gabe profile image
Gabe Author

This is insanely cool - thank you for it!

punchycodes profile image
Jamie Richardson

Thank you for this! I was just thinking I need to start learning about grid.