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!
Stephanie Eckles: [0:00] In index.html, create a div class container to put all of our grids into. Inside the container div, put in a few items with div class="item", put some texts in a div while you're at it so you can see it reflected in your browser. Let's put four div items. When we refresh the page, we can see that the item divs are lined up vertically on the browser screen.
[0:24] In StyleDotCSS, let's add the container and item classes. Here's where the magic of CSS Grid happens. In the container class, type display grid. This creates a CSS grid. Now refresh. Wait, nothing happened. Why not?
[0:39] Let's think about what a grid looks like. It usually has rows and columns, same thing with CSS grid. Let's go back and put in rows and columns. You can do this using grid-template-columns and grid-template-rows. Let's make a 2x2 grid with columns of 100px and rows of 75px.
[0:58] Refresh and boom. Let's make the text shorter so that it's easier to see here. Refresh. Here we go, much better. We have a one 2 by one 2 grid with width of 100px and height of 75px.
[1:15] Here's a challenge for you. Take a moment to see if you can manipulate the code to give your CSS grid three rows and columns instead of two rows and columns.
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!
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?