O'Reilly logo

Instant 960 Grid System by Diego Tres

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

Quick start – using 960 Grid System from Photoshop to code

In this section, we will show you how to create your first website, similar to the following screenshot, based on 960.gs:

Quick start – using 960 Grid System from Photoshop to code

As you can see, my section Work. is divided into three sections (four columns per job), and because of that, I used the 12-column grid. If I have had used a grid with 16 columns, it would have been impossible to make this section, because it is not divisible by three. In this case, we should change our layout to use one or two or four or eight or 16 jobs per line.

Quick start – using 960 Grid System from Photoshop to code

All the ...

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