The CSS grid allows the designer to lay the page, or an element on the page, into regions. These regions are logically arranged in rows and columns. The grid allows for flexibility and for truly responsive formatting.

Learning Outcomes for this Chapter

Upon completion of the reading of this chapter and assignments found at the end, a student should be able to:

  • apply the grid display to an element,
  • add a gap between grid elements,
  • create a page with nested grids,
  • span multiple grid cells with a single element,
  • use the new “fr” unit to divide up the unused part of a grid.