All about 960gs - a great css framework for building modular grids

    I want to give an exhaustive description of the wonderful framework for building modular grids 960gs. Recently, somewhere in the comments they said that 960gs is more difficult to understand than blueprint , which surprised me. I don’t want to compare these frameworks, if only because they appear in different weight categories, however, to build a modular grid, nothing is easier and easier to understand than I did not see 960gs.

    It seems that they wrote about modular grids on Habré, but here something disappointed the search, all garbage is, like "Philosophical geometry". Here are a few links offhand:

    Since I am a programmer myself, I hope that seasoned layout designers and designers will forgive me some oversights if they are suddenly made lower in the text. I removed all the code on , firstly, Habr does not allow to host the whole article due to the large number of tags when highlighting the code, and secondly, the code will not inflate the article in vain.

    960gs got its name because of the choice of Nathan Smith, the author of the framework, the default full container width of 960 pixels. However, 960 px is not an iron limit at all.

    All 960gs elements are described as classes for css. Obviously, they should be used as <class = "960gs_someclass" tag>.
    In this article, I will use the framework code from the official site, . To read and understand the article, you do not need to look at this code at all, at the end of the story I will focus on ways to get the css code in more detail.
    In the examples, as markup elements, I will use divas, and, for convenience, I will call such divas by the name of their 960gs class. For example, I will call the div with the class .container_12 the container element. I hope this little liberty will find understanding in the eyes of the guru from the layout.
    Also, when describing the parameters of the elements of the framework, I will describe only the parameters of the original css code. Of course, the layout designer is free to change them or add new properties as he needs.
    When translating, the grid element was called "cell", which is somewhat far from the literal "grid", but it does not sound so ugly and much closer to the real purpose. Compare: “put three grids on one row” and “put three cells on one row”.
    I hope that the roughness is over, so I will go directly to the topic of this article.


    Container - The root element of the 960gs markup that sets the parameters for the modular grid. “Root element” - means that only the framework’s children affiliated with it will participate in the formation of the modular grid, “setting parameters” - means that all the elements of the framework that are inside the container obey its parameters in a uniform way.
    A container with 12 columns may look like this:

    A container sets the following parameters for a modular grid:

    Everything else is left to the will of the designer.
    On one page there can be at once as many containers as you like with the same parameters or with different ones (obviously, the designer should have very good reasons to use several different modular grids on the same page).

    Several containers are convenient to use, for example, in order to divide the page into areas on the header / main content / footer (header / content / footer).

    Nested containers within the ideology of 960gs are absurd (imagine nested in html), however, by manipulating the indentation in css, it is possible to nest containers in each other. But why?

    In the future, I will use a container with parameters:
    • Column Width: 60px
    • Columns: 12
    • Groove Width: 20px
    • Container Width = (60 * 12) + (20 * 11) + (20/2 * 2) = 960px

    Example container code:

    At the development stage, it is convenient to use a grid-image as a background-image container, which you can take, for example, on the official website (this will be written a little further on). True, only for standard 12 and 16 column layouts.
    div.container_12 {
        background: #fff url ("/ img / 12_col.gif") repeat-y;


    Grid - one of the two basic markup elements, intended for the location of html elements on the modular grid of the container. A cell (grid) always orientates its contents in a horizontal plane with respect to the container. A single cell can occupy one column of a modular grid, or all at once, class names reflect this property: for a cell occupying one column, the class will have the name grid_1, for a cell in two columns it will be grid_2, for a five-column cell grid_5, etc. d. Therefore, in general terms, we can represent the class as grid_ X , where X is the cell width we need in the columns of the modular grid. Consider the grid_1, grid_6, and grid_12 grids, respectively:

    One cell can side by side with other cells horizontally, provided that together they cover the columns no more than what is in the container:

    Be vigilant if more columns are required than the container has, the rightmost cells that do not fit in the size of one line will be forcibly overthrown by the line below.

    Curious readers can look into the css code and find out that the grooves are formed using the margin, unlike cells for which an html element is needed. However, I hope this was obvious to everyone.

    Aggressive layout designers can indignantly rename all references to grid_ to, for example, cell_ in the framework code, which, in my opinion, is closer to the truth, as well as more clearly.


    Probably everyone who read the previous code noticed that a new element appeared in it:

    Clear is the second basic markup element of 960gs. To understand what clear does, we consider the following situation: I will try to rewrite the last example without using clear, adding a red bezel to the container for convenience.

    Hmm, the container was not stretched by daughter cells, but remained thin and lonely. Therefore, the first clear task is to stretch the parent container to the expected size . Now, I propose to look carefully at the first example from the grid section, in which each cell individually occupies the entire line. From this example, it is logical to conclude that the second clear task is to complete the current row, regardless of how many free columns are left in it .
    From these two rules it follows a good habit when working with 960gs to always end any line with clear, even if this line is the last or only one in the container.

    It is no secret that divas with the clear class are used by typesetters relatively often. In order to avoid possible conflicts between the code of the entire site and the 960gs code in the future, it is likely that the typesetter should either rename the clear class to some other one (for example, clr) in the css code of the framework file, or specify it (for example , .container_12 .clear). Still, in my opinion, renaming in case of potential conflicts is a more suitable way.

    Next, I will list all the additional classes for the grid element. They are additional because they exist only as additional classes to the main class grid_X. For example,

    Alpha and Omega

    Sometimes there are situations when it is necessary to embed several others in one cell. As an example: we need two very long solid cells on the sides, 10 rows high, and one cell in the middle, on each of ten lines.

    In such cases, the alpha and omega classes should be used . The bottom line is simple - if we nest several other cells in a cell, then the first nested cell needs to be set to alpha, and the last, obviously, omega.

    By the way, an example is one of the rare cases when you need to use a tag

    If you need to nest only one cell, it is enough to use only the alpha class, without omega.

    Prefix, Suffix, Push and Pull

    These four additional classes are essentially a more abstract replacement for padding-left, padding-right, left, and right, respectively. It should be noted that using these classes is much more convenient than calculating the necessary indents in the mind or on the calculator.
    They all have class names similar to cell class names: class_name X , where X is the number of columns of the modular grid.
    Consider a simple example:

    Now apply the prefix_1, suffix_1, push_1, and pull_1 classes to each of the cells with the rhyme, respectively:

    That's all, the article listed all the features of 960gs, it remains to consider only a few points.
    First, download the code examples from the journalist at
    Second, a framework site address: . There, by clicking on download you will get a css file with two types of styles (12 and 16 column), as well as a bunch of everything in addition, including templates for many graphic editors.
    Thirdly, at there is a wonderful generator of modular grids based on 960gs, which, in particular, can make rubber modular grids ( !), be sure to rate this wonderful thing. It is with this tool that you can bypass the 960px limit set by the author.
    Fourthly, I want to recommend the article to consolidate the material if someone else has not read it.

    Let me take your leave on the sim, I wish you interesting and difficult projects in the new year!

    UPD: Submitting (px, em,%) Grid generator . Thanks Pendalf .
    As well as a “rubber” version of 960gs. . Thanks Deavy

    Also popular now: