“A two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.” — Wikipedia The grid is an invisible structure that collects all the elements within a web page together. Grids are never properly visible, however traces of the grids’ “discipline” can be seen by the placement of elements within a web page. The grid also dictates the size of such design elements as widths of column texts, repeated placement of elements, padding around imagery, word spacing, line height, etc

DesignFestival: An Introduction to Grids in Web Design

Tags: tutorial
Callum Hopkins is a designer and front-end developer with over 6 years web experience and a Bachelors degree in Design for Digital Media. With knowledge in both design and development, he is able to influence both sides of the web building process. Callum has a love for complex coding functions and beautiful design. He runs his own personal blog at where he writes thought-provoking articles.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

No Reader comments

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.