From the course: Responsive Layout

Intro to CSS Grid - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Intro to CSS Grid

“

- [Instructor] CSS Grid Layout is a grid-based layout system that is new to CSS in the last few years and is really changing the way we lay out web pages. It was created specifically to allow us to avoid all the hacks we've been using for years to get web pages to act the way we want them to. This is an example of a page that's laid out in grid. Scrolling down to the HTML, here on line 19 I have a container element and then inside it, a bunch of different child elements. The outer element is called the Grid container. And every child element inside it is a Grid item. You can see the lines going horizontally and vertically across the grid. I have borders to find in the CSS so you can see where they are. These lines are called grid lines, the lines between the columns and the rows. The columns and rows collectively are called grid tracks, the space between two adjacent grid lines. A grid cell is one unit in the gird between adjacent row and column grid lines and then in a bit we'll learn how to make an element cover multiple cells which is called a grid area. In Firefox, we can get additional information about a grid using developer tools. I'm gonna turn them on right here. Under the Layout tab, you can see that there's a grid section. You have to choose which grid you want information about as there might be more than one in the same page. Here we just have one, so I'm going to check the box. Below, there's a little diagram of the grid where you can get information about every cell in the grid. If you hover over the grid cells in the dev tools, up on the page you'll see information about each grid cell including what row and column its in and the exact dimensions of the cell. You may not be able to see where are the grid lines are in the grid especially if your cells don't have borders, your cells are combined into grid areas. If I check this box down under the grid section, for extend lines infinitely, you can see the lines going out from the grid to give you a better idea of where the lines are. The lines in the grid automatically have numbers which we can see if we check display line numbers. The last option for area names we're going to look at in a later video.

Contents