From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Defining rows and columns

Defining rows and columns - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Defining rows and columns

- [Instructor] To create a grid, you first need to tell the browser that it's a grid and then define the rows and columns. On our exercise page, we have 12 divs inside a container div. Over on the page we can see we have 12 boxes. The divs are block elements, so they take up the full width of the page. The first thing we're going to do is add display grid to the container element to tell the browser that it's a grid. So over here in the code, I'm gonna go to line nine for the container class I'm going to type display colon grid and save and go over here and refresh. And nothing appears to happen, but if we turn on the Dev tools we can see it's a grid with one column. There's a grid listed down here in the grid section and I can click the box to see the grid lines. One column is what we get by default so we need to go in and define some more columns. We're going to use the property grid-template-columns. This tells the browser how many columns we want and how wide they should be. For…

Contents