grids.md

CSS Grids

A two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as a framework on which a designer can organize text and images in a rational, easy to absorb manner.

Beginning Grids

Before starting CSS Grids, follow the Visual Principles trail map.

• Read Grid Systems: Principles of Organizing Type
• Read Grid Systems in Graphic Design
• Read Mark Boulton's Designing Grid Systems
• Read Ordering Disorder: Grid Principles for Web Design
• Read Geometry of Design: Studies in Proportion and Composition

You should be able to

• Create inner axial alignment.
• Edit and/or build a grid according to the content in your design (not using a prebuilt framework).
• Have symmetrical and asymmetrical balance in your designs.
• Keep consistent vertical and horizontal space.
• Use the grid to create active white space within a design.
• Use the grid to strengthen the contents hierarchy.
• Use a more complex grid system than a equal column 3 or 4 column grid.

Ongoing Reference

• Browse The Grid System.