17
Gr id L ayou t
Grids are a fundamental design technique.
Simple grids have been used by calligra-
phers since medieval times, and the moderntypographic grid has been in use since the second
half of the 20th century. For a few years now, efforts
have been made to bring grid-based design to the Web, with a number
of frameworks using floats, padding, and margins to emulate the possi-
bilities of print, although these efforts have always felt like somewhat of
a fragile hack.
Recently, however, browsers have begun to implement a native CSS grid
layout system, as detailed in the Grid Layout Module (http://www.w3.org/TR/
css-grid-1/). This module provides a series of properties designed specifically
to create grids on screen, meaning the developer no longer has to hack
them together from existing properties and behaviors.
The full range of properties in the Grid Layout Module is quite exten-
sive, so I’ll focus on the most immediately useful aspects and not get too
bogged down in detail that could be potentially confusing. When appropri-
ate, I’ll flag spots where I’ve omitted some detail.
PX3024