Upon my initial discovery of the 960 Grid System, I was immediately captivated by the prospect of effortlessly implementing intricate layouts. Yet, as a novice in web design at the time, the complexity of the system upon downloading the files left me feeling overwhelmed. Amidst the myriad of code, how could this truly be an easy method for crafting layouts?This article is tailored for web designers and front-end developers who are intrigued by grid-based layout systems yet struggle to comprehend them. We will delve specifically into the 960 Grid System, ensuring that after reading this guide, you will find that most other grid systems are quite similar and will become more understandable once you grasp a few fundamental principles.Before we dive into the intricacies of the 960 Grid System, let’s briefly discuss grid-based design in general.This concept is not an original from the digital realm. In fact, it traces back to one of the oldest and most basic design principles: alignment. Our brains are wired to simplify things to enhance comprehension.This is why we attempt to impose order on chaotic elements, such as identifying a face in the moon’s craters. Naturally, the easier it is to impose order, the quicker our brains can recognize a pattern and move on. Grids are so organized and orderly that they require minimal interpretation on our part. Consider the two page layouts depicted in the following image.
Although both images are composed of rectangles, the layout at the top appears fundamentally superior to the one on the bottom. We can immediately recognize a pattern, accept it, and move on. The layout on the bottom, however, is visually unsettling by comparison.There is no clear pattern, order, or goal—it appears as a random assortment of shapes. Our eyes tend to frantically search for fractions of a second while we attempt to identify a trend, which increases the time necessary to take in the scene as a whole. It’s interesting to note that random can still be beautiful. Random certainly has its place in nature, art, and even design, but it’s not an effective way to logically organize information.The point is that grids are among the simplest and strongest ways to create order on a page. They may seem rigid, but remember that they are both highly efficient and effective, and can be quite flexible if you don’t let your imagination be constrained by the necessary structure.The 960 Grid System, along with similar tools and systems, offers a quick and easy way to create grid-based layouts using CSS.This is achieved by providing cross-browser-tested and optimized preset column widths for your content. These grids can help you save on your online marketing budget. Prior to CSS3, it wasn’t exactly simple to divide a page into columns without engaging in arduous calculations.For example, if you have a 1,000-pixel wide container and wish to divide it into three columns, each column would be 333 and 1/3 pixels wide (not a pleasant whole number). Moreover, columns divided this way would collide, necessitating margins on each side. If we add a 10-pixel margin to each side of every column, we must also subtract 20 pixels from the width of each column.This results in three columns approximately 313 pixels wide each with a 10-pixel margin on each side (even then, you’re at 999px, not 1,000px). Want four columns in a row below that? Then you have to repeat the process, subtracting 80px of margin from 1,000px for a total of 920px, dividing that by 4 to get a column width of 230px.Finally, if you want to add a sidebar that’s a third of the total page width, you have to create a column that’s 750px for the content and one that is 250px for the sidebar, then subtract 40px of margin to get one 730px column and one 230px column. Are you confused yet? Other web designers have experienced the same challenge. It’s not exactly rocket science, but it’s also not something you want to repeat for each project you create.The solution? Find someone else to figure out all these intricate column widths, incorporate them into a CSS document, and let you download it for free. (That person happens to be Nathan Smith, the creator of the 960 Grid System).
The 960 Grid System is simply a method for laying out websites using a grid that is 960 pixels wide. The reason it’s 960 pixels wide is that the number 960 allows for numerous clean divisions when factoring in column widths and margins, and it fits well on the majority of screens.The 960 GS comes in two primary variants: a 12-column grid and a 16-column grid (a 24-column version is also included for those who require additional control). In the 12-column version, the narrowest column is 60 pixels wide, with each subsequent column increasing by 80 pixels.So the available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860, and 940. 
Similarly, in the 16-column version, the narrowest column is 40 pixels wide, with each subsequent column increasing by 60 pixels. So the available column widths are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880, and 940. 
When examining the diagrams above, consider each of the dark blue horizontal bars as a CSS class within the 960 Grid System. To create an object in your layout that is the width of one of those bars, you simply assign the appropriate class to your div—that’s it! The classes are conveniently named according to their size, with the class being the narrowest and the class being the widest (in the 16-column version, is the widest).So, to reuse our image from above, take a look at the available columns now, but this time, think about them using their respective CSS classes instead of pixel widths. 
This naming system makes it incredibly easy to design complex layouts in seconds. The trick to filling a page’s width is to ensure that the numbers assigned to your selected classes total 12 in the 12-column version and 16 in the 16-column version.For instance, using the 12-column version, if you have three divs of text that you want to display side-by-side in a 3-column layout, simply assign the class to each one to total 12 (4+4+4=12). 
Similarly, assigning the CSS class in the 16-column version makes it easy to create a 4-column layout (4+4+4+4=16). 
Make sure you’re referring to the correct classes by placing your 12-column elements inside a div with the class and your 16-column classes inside a div with the class .If you’re new to the 960 GS, I hope you’re experiencing your “aha” moment right now regarding just how quickly you can specify a layout using this system.The 960 Grid System allows you to reposition elements independently by pushing or pulling them horizontally along the page. This is achieved using the and CSS classes.For example, consider the two examples in the following image. The first example is a basic 4-column layout using only the class. However, in the second version, I’ve pushed the first column and pulled the last column, resulting in their positions jumping over one column from where they would normally lie in the layout.
Keep in mind that you can push items as far as you want. If I had wanted to push an element two columns over, I would’ve implemented the class , and so on. The push/pull system has significant implications for how you lay out a page in your HTML document.For example, in the following example, imagine the website’s name is typed out in a logo and placed as the first element on the page. As the most important element on the page, you’d like to keep the logo as the first item in your HTML markup, but visually, you actually want it to appear in the center of the page.Before pushing/pulling:
To visually position the logo element in between the two text columns, you would use the following HTML:<div class=”grid_6 push_3″><p>logo</p></div><div class=”grid_3 pull_6″><p>text column</p></div><div class=”grid_3″><p>text column</p></div><div class=”grid_12″><p>big box</p></div>This results in the layout shown in the following image.After pushing/pulling:
Despite the fact that the logo comes first in our markup, it will be visually positioned in the center of our page.Occasionally, you’ll want to create empty space in a layout (negative space is a good design element). To accomplish this, apply the and classes to your divs. These are implemented similarly to the and classes. For instance, to leave a blank space that is the width of one column before an element, use the class, or after an element using the class. 
As you can see, the example above uses a _3 class to create an empty space the width of three columns after it.The final piece of knowledge you’ll need to know is that you are provided with the (“first”) and (“last”) classes that must be applied to any grid units that are the children of other grids. The class will be applied to the first child, and the class to the last child. Essentially, these classes provide a margin fix so that you can nest grid units inside of other grid units.With this newfound knowledge, you should now be a 960 Grid System expert. To review, there are essentially only 5 concepts you need to remember:
Use the class for the 12-column version and the for the 16-column version.
Use the classes , , , etc. to set your column widths. If you want to fill a page horizontally, make sure the numbers add up to 12 or 16 (i.e., + + = 12).
Use the and classes to independently position items on the page, regardless of their position in your page’s markup.
Use the and classes to create empty spaces in your layout.
Use the and to fix the margins for any nested grid units.
There is also a CSS reset included with the 9
