Join Morten Rand-Hendriksen for an in-depth discussion in this video CSS grid terminology, part of CSS Grid: First Look.
- View Offline
- [Voiceover] CSS Grid brings with it some new terms and terminology you need to be familiar with to understand what's going on. Here's a quick primer. I've also added a pdf document with these terms explained and the exercise files for this course for future reference. First of, grid. A grid is any element with its display property set to grid. Grids have rows, those are the horizontal lines and columns which are the vertical lines. Next, grid lines. A grid line is the line that makes up the grid.
They can be horizontal or vertical or can be referred to by number or name. The column lines are counted based on the direction of the defined language. So if a page is set to left to right language, the count is left to right for column lines. If the language is right to left the count is from right to left as well. A grid track is the space between two grid lines. Grid tracks can be either horizontal or vertical representing rows or columns. A grid cell is the space between four grid lines top, right, bottom, left.
A grid area is any area within the grid defined by its four outermost grid lines. A grid area may cover multiple lines and contain multiple cells. Finally, grid gutters are the space between rows and columns. Grid gutters are not currently implemented in any browsers so in this course I'll work without them and dedicate a movie to explaining how they will work once implemented.
Join Morten Rand-Hendriksen in this course for a first look at this emerging CSS module. He covers setting up CSS grids, positioning content, and working with named lines and template areas. The final videos in the course introduce practical uses for CSS grids, including online magazines and three-column layouts.
- What is CSS Grid?
- Using the CSS Grid playground
- Setting up a CSS grid
- Positioning content in a CSS grid
- Using template areas in a CSS grid
- Creating a responsive grid layout