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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.