The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

210 Chapter 17

grid layouT

Before introducing the new CSS grid syntax, I’ll explain some of the termi-

nology used in the Grid Layout Module. Even if you think you’re familiar

with typographic grids, take time to read through these definitions as the

terminology used in CSS grids is quite distinct.

The following are the key terms used in the Grid Layout Module:

Grid container The container element that acts as the boundary and

sets the dimensions of the grid.

Grid lines The dividing lines between rows and columns. These lines

are notional, not actual.

Grid tracks A shorthand name for both rows and columns. Each col-

umn or row created in the grid is referred to as a track. Tracks are the

spaces between lines.

Grid cells Each intersection of a column and a row creates a cell.

These are like cells in a table.

Grid areas A cell or multiple cells that mark the space in which a grid

item will be placed.

Grid items Each child element placed in the grid.

A grid is created by first setting a number of lines on the grid container

to create a series of tracks. Grid items are then positioned on the tracks

using lines as coordinates to create areas, as shown in Figure 17-1.

Grid track

(column)

Grid track

(row)

Grid container

Grid cell/Grid area

(one cell)

Grid line

Grid item

Figure 17-1: A simple 3×3 grid showing the core terms used in the CSS Grid Layout

syntax

The grid lines are the lines between cells. They define a series of rows

and columns, which are numbered for coordinate placement. (I’ll explain

this concept in stages as I proceed through this chapter.)