Introduction to CSS Grid Rows and Columns with display: grid

Share this video with your friends

Send Tweet

Now that we have basic styles set up, it's time to get started applying some grid styles! First, we'll need a container and some items in our HTML to apply styles to. We'll create those divs with the classes applied and hop into our styles.css to make them a grid.

The first thing you'll notice is that when you apply display: grid for the first time nothing happens! This is expected so don't worry. Every grid needs rows and columns so that's exactly what we'll define with grid-template-columns and grid-template-rows.

Lesson Challenge

In this lesson, we set up a grid with 2 columns and 2 rows. Use what you learned in this lesson to create 3 rows and 3 columns. Maybe try adding a few more items in your HTML to see the results!

Kevin Woodfield
Kevin Woodfield
~ 4 years ago

In video no.2 you do not specify a number of columns and rows however you get a 2 rows and 2 columns. Why is that? Is that the default?

Hiroko Nishimura
Hiroko Nishimura(instructor)
~ 4 years ago

In video no.2 you do not specify a number of columns and rows however you get a 2 rows and 2 columns. Why is that? Is that the default?

Hi Kevin! Though I didn't specify something like number-of-rows: 2; number-of-columns: 2; , because I specified:

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 75px 75px;
}

With 2 values for columns (100px, 100px) and 2 values for rows (75px, 75px), CSS Grid automatically knew that I wanted 2 columns and 2 rows! Hope this helped. Thanks!