Introduction to CSS Grid Rows and Columns with display: grid
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!
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?
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!