A Quick Introduction to CSS Grid

3 min read

CSS Grid is the heaven sent answer to all those pesky work-arounds 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 bootstap 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.

<div class="my_grid">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

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

.my_grid {
	display: grid;
}

# 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

.my_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
}

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

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.

.my_grid {
	display: grid;
	grid-template-columns: 2fr 2fr 1fr;
	grid-template-rows: 1fr 4fr 1fr;
	grid-column-gap: 2rem;
	grid-row-gap: 2rem;
}

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.

Enjoy, friends!