O'Reilly logo

Sass and Compass Designer's Cookbook by Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building a grid with grid classes

Grid-based layouts divide your design into a collection of rows with equal-sized columns. Content and graphical elements can be organized according to this layout. Grids help in creating a logical and formal structure for designs. They prevent inconsistencies between the original design and the final implementation in HTML as designers and developers work with the same grid.

Grids are also helpful in responsive design, because the grid's columns can easily be rearranged to fit different screen widths.

Grids are formed by rows and columns. A grid with 12 columns can be easily adopted for different screen sizes. In this recipe, CSS classes are used to set the width of the grid items.

There are 12 classes for a grid ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required