Now that you know what CSS Grid Layout is, you’ll learn how to create your own grid. This lesson will cover making a grid container, adding columns and rows, the explicit and implicit concept behind Grid and how to space out grid gaps.
This section contains a general overview of topics that you will learn in this lesson.
- Make a grid container.
- Define grid tracks.
- Explain the difference between an implicit and explicit grid.
- Set gaps between grid cells.
This lesson will show you how easy it is to make a grid layout without much work. In upcoming lessons, you will find out more about positioning and how to make complex grids, but for now we’ll start with something basic.
We can think about CSS Grid in terms of a container and items. When you make an element a grid container, it will “contain” the whole grid. In CSS, an element is turned into a grid container with the property
display: grid or
In this example, the parent element marked
class="container" becomes a grid container and each of the direct child elements below it automatically become grid items. What’s easy about CSS Grid is that you don’t have to assign each child element a property.
Note that only the direct child elements will become grid items here. If we had another element as a child under one of these child elements it would not be a grid item. In the example below, the paragraph element is not a grid item:
<!-- index.html -->
<p>I am not a grid item!</p>
But just as you learned in the flexbox lessons, grid items can also be grid containers. So you could make grids inside of grids if you wanted.
Lines and tracks in grids, oh my!
Since you’re coding along with our example (right?) you will notice it doesn’t look very grid-ish yet. A lot of resources on CSS Grid like to show you boxes and outlined grid tables right from the start. But if your grid container and grid items don’t have any borders you won’t actually see these lines on the page. So don’t worry, they’re still there!
If you inspect these elements on a webpage using developer tools, you will notice grid badges on the grid elements in the code. The Layout options of the dev tools allows you to select an overlay that can show these invisible lines, tracks and areas of the grid. You will read about using a browser’s developer tools in the assignment below and learn more about lines, tracks, and areas in the next lesson.
Columns and rows
Now that we have our grid container with several grid items all set up, it’s time to specify our columns and rows. This will define the grid track (the space between lines on a grid). So we could set a column track to give us space between our columns and a row track to give us space between our rows. We will get into the specifics on tracks and lines in the next lesson, but for now let’s just make some columns and rows.
grid-template-rows make defining column and row tracks easy. For this lesson, we’ll stick to defining our columns and rows using pixels. In the upcoming lessons, you’ll learn more about defining with percentages and fractional units too.
Going back to our grid container from above, let’s define two columns and two rows to place our four grid items:
If we want to add more columns or rows to our grid, we can define these values to make another track. Let’s say we wanted to add a third column to our example:
CSS Grid also includes a shorthand property for defining rows and columns. In our previous example we can replace the properties for
grid-template-columns with the shorthand
grid-template property. Here we can define our rows and columns all at once. For this property, rows are defined before the slash and columns are defined after the slash. Let’s keep the same column and row values, but use the shorthand property instead:
/* styles.css */
grid-template: 50px 50px / 50px 50px 50px;
Columns and rows don’t have to share all the same values either. Let’s change the property values of our columns so that the first column is five times as wide as the others:
Let’s go back to our original example of a 2x2 layout for four grid items. What happens if we add a fifth item to our container without changing our
You’ll notice our fifth item was placed on the grid and it’s been slotted into a third row we did not define. This is because of the implicit grid concept and it’s how CSS Grid is able to automatically place grid items when we haven’t explicitly defined the layout for them.
When we use the
grid-template-rows properties, we are explicitly defining grid tracks to lay out our grid items. But when the grid needs more tracks for extra content, it will implicitly define new grid tracks. Additionally, the size values established from our
grid-template-rows properties are not carried over into these implicit grid tracks. But we can define values for the implicit grid tracks.
We can set the implicit grid track sizes using the
grid-auto-columns properties. In this way we can ensure any new tracks the implicit grid makes for extra content are set at values that we defined.
Let’s say we want any new rows to stay the same value as our explicit row track sizes:
/* styles.css */
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
By default, CSS Grid will add additional content with implicit rows. This means the extra elements would keep being added further down the grid in a vertical fashion. It would be much less common to want extra content added horizontally along the grid, but that can be set using the
grid-auto-flow: column property and those implicit track sizes can be defined with the
The gap between grid rows and columns is known as the gutter or alley. Gap sizes can be adjusted separately for rows and columns using the
row-gap properties. Furthermore, we can use a shorthand property called
gap to set both
Before adding our grid gap properties let’s make things a little easier to see without relying on developer tools. We’ll go ahead and add a border around our grid items so we can get a better sense of their placement around each other:
Next we’ll use a slight grid column gap to space out our two columns a bit:
Finally we’ll add a lot of gap to our rows to highlight the difference:
You can also try playing with the shorthand
gap to set both the
column-gap in the above CodePen.
Now that you’ve made a grid you can start to see how easy it is to control the layout of your elements with CSS Grid. You may also realize how CSS Grid can solve common layout problems. In the next couple lessons we will cover positioning elements and advanced grid attributes. But first, check out the links below that cover making the basics of a grid in more detail.
This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.
This section contains helpful links to other content. It isn’t required, so consider it supplemental.