Chapter 2: An Introduction to Grid Systems in Web Design

by Callum Hopkins

In web design, grid systems are invisible structures that collect all the elements within a web page together. In this article, I’ll provide an introduction to grid systems, explaining what they are, their purpose, and some of the theory behind them. Wikipedia explains a grid system as —

a structure (usually two-dimensional) made up of a series of intersecting straight (vertical,horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner.

The Nature of Grid Systems

Grid systems are never properly ...

Get Bootstrap: Related Tools & Skills now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.