The Modern Web

Grid Layout

Grids are a fundamental design element. Simple grids have been used by calligraphers since medieval times and the modern typographic grid 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 being created that use floats, padding, and margins to emulate the possibilities of print.

Recently browsers have begun to implement a native CSS Grid Layout system, which 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. But before I introduce the new grid syntax, I’ll explain some of the terminology used in the Grid ...