Navigation

Fight Div-itis and Class-itis With the 960 Grid System

CSS, Web Development | Mar 31, 2010

Years ago, HTML tables were the standard for laying out web pages. CSS and semantic thinking changed that, and today CSS frameworks make designing relatively easy.

But they can also generate a surprising number of superfluous elements.

The 960 Grid System encourages the addition of <div> elements and class attributes, especially on complicated pages. Is this really an improvement over nested tables?

Creating cleaner code means going beyond the framework and thinking about what it really represents.

CSS frameworks provide a workflow solution, namely a rapid deployment of grid-based web layouts. One of the most popular frameworks today is the 960 Grid System (960.gs), named after its default width. With practice, 960.gs can be a great tool for any web designer. But it also revisits a few old problems.

Before CSS saw widespread use, tables provided all the layout a web designer needed. More complicated designs had tables nested within tables, but used in excess these created a tangled mess of HTML. CSS-based layouts lured designers with the promise of less HTML; they also appealed to semantics enthusiasts. Simply put, CSS encouraged the use of HTML that described what content was about, not what it should look like.

As designers learned to use CSS, div elements replaced tables. But divs can be—and often are—nested, just like tables.

 

The Spread of Class-itis and Div-itis

Clear, lean code offers many advantages. It’s easy to fix, quick to download and causes fewer problems across different types of browsers. Relevant tags help screen readers, search engines and mobile devices interpret meaning in addition to layout.

Other than the semantics, the great advantage of using <div>…</div> over <table><tr><td>…</td></tr></table> is that we end up with less code to do the same job. But now designers face a glut of classes and divs.

Do CSS frameworks such as 960.gs recreate the underlying problem with tables? If their goal is efficient HTML, can designers and developers use 960.gs without spreading “class-itis” (i.e. excessive use of classes) and “div-itis” (i.e. so many divs that tables start looking good again)? Yes, they can.

To understand how, we need to look at the framework itself.

 

A Rundown of 960.gs

960.gs provides a set of columns, written in CSS, that facilitate the laying out of web pages. Download the files, add them to your website and it’s ready to go. No special plug-ins or new technology are needed, and you can use it in conjunction with other CSS files.

Columns are contained within blocks called (naturally) “containers.” The defaults are container_12 and container_16, which divide into 12 and 16 columns, respectively. Custom sizes are available.

diagram of 960-pixel-wide containers

The diagram above shows the two default containers with 12 and 16 columns. The gray won’t be visible on your final website, of course. The columns merely show where blocks, called “grids,” can be arranged.

A grid is a block of content that can cross more than one column in a container. Grids float left by virtue of being held in .container_x, making them ideal for modular layouts. The width of each block is determined by which grid you apply to it: grid_1 is one column wide, grid_5 is five columns wide, etc.

diagram of various grids within a container

Above, .container_12 holds three grids. Each grid, in turn, would hold different elements of the page’s content.

diagram of various grids within a container

Above, .container_16 holds two blocks of 12 and 4 columns, respectively. Like .container_12, this 16-column-wide layout measures 960 pixels wide—but its columns are narrower.

Resizing the grids in which the content’s elements fit is simple: change the grid_x in each div.

The official 960.gs website showcases websites that were built on the framework, and it also provides page templates, links to a custom grid generator and the framework itself. Detailed instructions are included, too, because there’s more to learn. Grid margins and the ability to step into gutters between grids make the system even more flexible.

In spite of these benefits, embedding <div class="grid_x">…</div> in <div class="container_x">…</div> encourages coders to use many class attributes (class-itis) and divs (div-itis).

 

Solutions

Arguing against tables for layout is easy enough. But using three or more levels of nested divs doesn’t solve the problem—it just replaces one set of tags with another. Frameworks help but don’t always solve the dilemma. With a little forethought, many of these problems can be avoided.

Only Use Classes That You Actually Need

The simplest solution to excessive CSS code is to cut out what isn’t necessary. 960.gs was conceived as a wireframing tool, meant to be replaced when the website goes live. It includes more than 180 class definitions.

If your design is structured on, say, .container_12 and never uses more than .grid_5 and .grid_7, then remove the others from the CSS.

Apply class=”grid_x” to Appropriate Elements: Headings, Images, Links, Paragraphs

The .container_x and .grid_x classes aren’t restricted to div elements. The class attribute can be applied to any element except html, head, meta, param, script, title and style—so, practically anything in the body. If a pair of div tags enclose only one item, then they may be unnecessary.

Applying Grid Code to Non-Divs

Using divs Using semantic code
<div class="grid_12">
<h1>…</h1>
</div>
<h1 class="grid_12">…</h1>
<div class="grid_3">
<img src="…" alt="photo" />
</div>
<img src="…" alt="photo" class="grid_3" />
<div class="grid_6">
<ul>
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>
<ul class="grid_6">
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
<table>
<tr>
<td><a href="#">…</a></td>
<td><a href="#">…</a></td>
<td><a href="#">…</a></td>
<td><a href="#">…</a></td>
</tr>
</table>
<a href="#" class="grid_3">…</a>
<a href="#" class="grid_3">…</a>
<a href="#" class="grid_3">…</a>
<a href="#" class="grid_3">…</a>


Grant Grid Properties to Certain Elements

Being simple CSS, .grid_x has properties that would work with any other class name—or any element. By copying the properties to certain elements, extra classes become unnecessary.

.examples li { (properties of .grid_4) }

<ul class="examples">
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>


Below, applying the grid to list items creates even columns, with minimal changes to the HTML.

three list items transformed into columns

CSS turns the above list into a multi-column group. If you need a normal list with bullet points, just discard the class="examples" attribute. Is this semantic? Certainly—as long as the content merits a list. The CSS merely changes how each bullet point is presented.

Another example:

.photos p { (properties of .grid_10) }
.photos img { (properties of .grid_6) }
<div class="container_16 photos">
  <img src="…" alt="photo" />
  <p>First caption</p>
  <img src="…" alt="photo" />
  <p>Another caption</p>
</div>

This automatically puts captions, enclosed in paragraph tags, adjacent to photos.

photo and caption on a grid with minimal HTML

When tables are not appropriate, the tabular effect is easy to create with non-tabular HTML.

.datelist { (properties of .container_12) }
.datelist h3 { (properties of .grid_3) }
.datelist p { (properties of .grid_7) }
.datelist strong { (properties of .grid_1) }
<div class="datelist">

  <h3>subhead</h3>
  <p>…</p>
  <strong>3 p.m.</strong>
  <strong>Jan 1, 2010</strong>

  <h3>subhead</h3>
  <p>…</p>
  <strong>3 p.m.</strong>
  <strong>Jan 1, 2010</strong>

</div>


tablular data marked with non-table tags

The example above is a schedule of events in which each “cell” in the table has a different tag to reflect its unique content, rather than having the catch-all <td> tag. (Ideal? Maybe not. The HTML doesn’t distinguish between groups of content.)

Applying .grid_x properties to other elements requires some planning, but it results in less-cluttered HTML and doesn’t interfere with 960.gs itself.

 

Use Classes in Parent Items, not Child Items

Div-itis and class-itis aren’t limited to CSS frameworks.

All of the examples in the last section share an interesting trait: only one class declaration in each. Wherever the same class attribute is used several times in a row in the HTML, change the parent instead of the children.

Unnecessary:

.item { (various properties) }

<ul>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
</ul>


Above, all six elements have a class. They’re redundant because the classes are identical. Here’s a better way:

.group-of-items li { (various properties) }
<ul class="group-of-items">
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>


The remedy here for class-itis is to assign a single class to the parent element. CSS selectors do the job, applying the styling to every <li> inside the .group-of-items class. This method can be used on any group of elements with a common parent. For example:

<div>
  <h1 class="title">…</h1>
  <h1 class="subhead">…</h1>
  <p class="publication-date">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
</div>
.title { (various properties) }
.subhead { (various properties) }
.publication-date { (various properties) }
.body-text { (various properties) }


Most of the paragraphs above are just simple paragraphs and yet have needless class attributes. We also have two headings, distinguished only by their classes—yet adjoining <h1> elements don’t make for a good content structure. Here is a better solution:

<div class="article">
  <h1>…</h1>
  <h2>…</h2>
  <p class="publication-date">…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
</div>
.article h1 { (various properties) }
.article h2 { (various properties) }
.article .publication-date { (various properties) }
.article p { (various properties) }


Now only two classes remain. We’ve kept the .publication-date class to distinguish it from the normal paragraphs below it. Because HTML doesn’t have a “date” tag, this class is necessary to show what the paragraph contains. The new .article class enables you to style that div and the elements in it in the CSS with minimal mark-up. The CSS in both examples has four definitions each, and yet we end up with much cleaner code in the second.

In general, identical elements with a common parent do not need extra attributes. Classes only help when there’s a difference between them. A rule of thumb: use classes only when you need to distinguish between otherwise identical types of content.

Simplify

The purpose of the 960 Grid System, and CSS frameworks in general, is to reduce the effort needed to lay out web pages. The benefit of CSS is that it reduces the amount of HTML necessary to display a page. But as a layout language, CSS isn’t perfect. Frameworks are merely tools that help people achieve solutions, not the solutions themselves. It’s up to designers and developers to combat class-itis and div-itis.


Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

How do you say more with less? Share how you streamline code and your workflow in the comments below…

Share this post
Comments (no login required)
  • Justin

    Learning a CSS framework just seems like overkill to me. I’ll usually use a consistent width for my sites (960px width & 20px gutters for instance), and I have a couple simple templates that I start from. It’s just as fast and usually more fun than using a framework.

  • Randy

    >By copying the properties to certain elements, extra classes become unnecessary.

    I think that copy and pasting source is a bad thing. It’s the DRY principal, don’t repeat self.

    Copy and pasted source has a xerox effect for bugs. For example, if the grid system changes or if there’s a problem, you have to fix it in more than place in your source.

    I think adding another class to the element you want to “gridify” an element is lesser evil than copying and pasting code. First, your file size is smaller. Second, you don’t have tons of duplicate code in your source.

    http://www.artima.com/intv/dry.html

  • http://lenatailor.designerteam.info Lena Tailor

    @ Randy.. I agree with you. But i think the idea behind DRY is far grander than that.

    DRY says that every piece of system knowledge should have one authoritative, unambiguous representation. Every piece of knowledge in the development of something should have a single representation. A system’s knowledge is far broader than just its code. It refers to database schemas, test plans, the build system, even documentation.

  • http://interactivestudios.blogspot.com Paul S

    Great article! Never read up about CSS frameworks, but now finally understand how they (or at least 960.gs) work. Looks easy the use and saves some time. If a project comes up in which it’ll be useful I will definitely use it.

  • http://hjmdesigns.com Harry

    The issue I have with grid based systems like 960, or YUI, is if a designer doesn’t get it and you have to re-envision their design to fit into the boxes. Working corporately for years with a designer who was a great artist but didn’t get the nuances of web is repetitive for a reason (or several) and using a structured grid is a good place to start. I have often tried to learn grids but I hate to remember what someone else wants to call what I am working on. Also, in looking over 960s site, are we still using pxs in the Smart phone age ??

  • http://www.rovomedia.com Rob

    The example above seems to me that the elements attributes are reversed from the image presented below it?
    Example provided:
    .photos p { (properties of .grid_10) }
    .photos img { (properties of .grid_6) }

    should possibly be reversed to:
    .photos p { (properties of .grid_6) }
    .photos img { (properties of .grid_10) }

  • Randy

    @lena: I totally agree.

    I was suggesting that using multiple classes in this case is not ‘class-itis’ per se but good coding practices. Copy and pasting the properties of “grid_4″ in your source just to avoid the second class seems to violate the DRY principal.

    .examples li { (properties of .grid_4) }

    That’s what CSS classes excel at. Eventually you will have to fix or maintain all the pasted “properties of .grid_4″ code. I’d just assume use the extra classes.

    • http://benthinkin.net Ben Gremillion

      From my view, eight divs with class=”grid_2″ uses more redundant code than “.somename, .grid_4{ (properties) }” but it might vary per case. If one’s goal is to clean up HTML, then don’t fewer class declarations make more sense?

  • http://www.bebop-ad.com BebopDesigner

    Brilliant post! this will make my life a lot easier. Cheers

  • Z`dsgns Filipino Web Dev.

    Well nice roundup :), very cool. In my opinion CSS Framework should only be used in large projects.. i guess, well tnx for this.

  • http://www.ukpb.co.uk/ Buy My House

    This is really very unique and useful content, and it’s a totally new stuff for me and i will learn a lot from this prolific content.

  • http://www.creatuswebdesign.nl/ Gert van den Brink

    This will really help me. Nice post!

  • http://www.sunshine-design.co.uk Jon

    I could not agree less with the use of CSS frameworks.

    I think if you’re finding basic layout problematic enough to need to fall back to a framework you’d be better off practising writing your own layout code. There is a learning curve but once you’re over it basic layout is a doddle.

    The last section of the post – ‘Use Classes in Parent Items, not Child Items’ is how I write CSS. Giving a parent item a class name means you don’t need tons of classes everywhere. More importantly it makes your CSS easier to read by giving sections context.

    If you’ve never seen object oriented CSS then you should check that out. Maybe it’s because I’m a developer and I’m used to the object oriented approach but it really does gives you flexibility over your CSS.

    Say I have a content area which is full width unless i have a sidebar. I give it the class ‘Content’ and code it’s look and feel. Then when I have a sidebar all I do is add the class ‘Content WithSideBar’ and have this class reduce the width to allow the sidebar to fit.

    Better than a framework – it has more meaning when you go back to the project in six months time than grid_3, grid_6!

    • http://benthinkin.net Ben Gremillion

      The projects that I’ve seen use 960 require frequent layout changes, especially during early development. Structure-based names like grid_x were easier to rearrange when a footer becomes a sidebar or a blog list doubles in size.

      The OO CSS I’ve seen is a framework like YUI, Blueprint and 960.gs — but approached from a code-based point of view. These techniques are intended for people who prefer 960 in particular.

      Class ‘Content WithSideBar’, ‘PrimaryContent’ or ‘minor-details’ are more semantically correct, and could even apply some SEO. It depends on your final application.

  • http://www.accesslab.net/ Natasha Banegas

    In my opinion, grid systems work great at the prototyping stage, since they allow to quickly create a working prototype. And the extra code is not an issue at this stage.
    But when it comes to building the actual website, CSS frameworks get in a way. It takes as much time to change the framework code as it would take to build a robust solution from scratch.

    However, it doesn’t mean that we should strip the “divs” from our code. I always use divs to structure main blocks, like header, main and secondary content and footer. Even if I could use native html elements, it is much easier to get an overview of the code structure and easier to make future changes.

  • http://www.joelemberson.com Joel Emberson

    This really opened my eyes to some things I’ve been neglecting with 960.gs – thanks for this great post!

  • http://www.bertrandlirette.com Bertrand

    Hmm… I never used a CSS frameework and I’m still not sure why I should. Is it supposed to be used by the newcomers of the CSS? I just don’t see the point of it.

    Also, it’s a strange thing : yesterday a student came to me and I made her the exact same remark you made about having all “li” in a “ul” with the same class… weird! ;)

  • sereal

    aahh… I never knew it can be applied to CSS too…

    thanks for putting this up online !

    good article !

  • http://www.designtank.ws ChrisR

    I resisted using 960 for quite a while due to concern about non-semantic class names. But I work at a place where layouts for large complex sites get changed frequently and I just used 960 for one such site redesign and it is a godsend. It is very quick to change the # of columns of content in a particular content block simply by changing class names. Keep in mind, you can use IDs for semantic purposes, such as #main, #details-sidebar, #utility-sidebar.

    I wish the Drupal developers grasped the concepts behind this article. What a horrible mess of nested redundant divs Drupal views produces, all just to wrap one h2 or one p of text. I am not exaggerating to say that in some cases on this current project, a single piece of text was nested in 7 divs, including one with a class of “nothing.”

    I get so tired of hearing how Drupal developers wanted to offer ultimate flexibility by generating this kind of bloated markup; they just don’t seem to grasp the concept of simplicity and inheritance.

    Off my soapbox!

    • http://www.invision-studios.com Sherm Stevens

      ChrisR, if you’re looking for a Drupal replacement, check out Concrete5 (http://www.concrete5.org). It’s a thinking man’s (and designing man’s) content management system.

      The best part is the editability of content — you can edit content in place. Drupal and Joomla are way too nerdy for most of my clients to grasp, but they get C5 right away.

    • Mo

      Hello ChrisR:

      >I am not exaggerating to say that in some cases on this current project, a single piece of text was nested in 7 divs, including one with a class of “nothing.”

      Views output is not set in stone. It can be customized to exactly the way you like by using your own template. Also this semanticviews module can help in this regard.

  • http://www.freizeitler.de Freizeitler

    Using 960 Grid System means to unify your website to billions others. It’s the safer way but it’s not innovative at all. You should always break the grid to make something unique. In times of handhelds and smartphones fluid layouts will have a comeback…

    • http://www.rovomedia.com rob

      So a fluid layout that was designed for a computer screen is just going to fold up and display on a mobile screen because it is a fluid layout? I’m not sure how that works, but going to give it a try. Thanks for the tip!

    • http://www.invision-studios.com Sherm Stevens

      Actually, using a grid is incredibly freeing in nature. It’s like architecture — once you have the foundation in place, you can be free to design and know it’s going to work.

      Just because it’s a grid, doesn’t mean it’s a fixed grid. Read Ethan Marcotte’s article at A List Apart (http://www.alistapart.com/articles/fluidgrids/) to see how to use percentage-based grids vs. fixed widths.

      Grid-based page design isn’t something new — we’ve been doing it for print for a long, long time.

      • Visitor

        Hi Sherm,

        They’re not talking about whether layout grids have a purpose in design, and they know how to make fluid grids. They’re discussing, from a developer’s view, the viability of coding an extra system to do what they could achieve with less markup and more control. Although a couple of people commented that frameworks would be great for large, complex sites.

        With 180 lines (or was that divs? eek!) of extra CSS, and extra HTML to go, it makes sense that a framework might not be suitable for a small or simple website. I’m inclined to think it’s better to save time, energy and headaches for developing clean, efficient CSS – unless the framework will viably aid a more effective outcome for the project.

  • Randy

    960 is a tool. It’s not a silver bullet to solve all your woes. It’s a tool to stick in your web development tool kit, to pull out when the need arises or when it’s appropriate.

    It’s not for everyone. Some people would rather do all the layout by hand. That’s fine. It’s not something that’s going to replace fundamental CSS knowledge and skill, either. It’s a tool, and like every good tool, someone people will swear by it, and some will forsake it preferring to do things “by hand.” Either way is fine.

    At any rate, thanks for the tutorial.

  • http://3circlestudio.com/ Justin Carroll

    “Frameworks are merely tools that help people achieve solutions, not the solutions themselves.”

    Pro.

  • eric

    I rarely use grids… looks like I’m going to do so more, now.

  • http://www.bloggs74.com/ natasha

    good post…loved it

  • http://bsidegraphics.co.cc/ BSide Graphics

    Great post!
    The great point of the grid system,is that they can be the base to develop your own framework,totally adapeted for your own workflow.

  • http://elizawhat.com Elizabeth Kaylene

    Great points. I agree with everything said. I personally don’t like the 960.gs, because, to me, it adds more work than necessary. I try to keep my designs to five or so divs: header, content, sidebar, footer, and a wrapper if necessary. Sometimes I need a second sidebar, or a nav div, but I try like hell to keep it all to a minimum.

  • Ant Gray

    Grid system is very useful for prototyping, if you experimenting with block sizes. It’s much easier to change in html grid_7 to grid_6, than in css changing width of it block (that way you don’t need to remember widths of grids).

  • Twice

    Thanks for such a brilliant article. For me a framework is brilliant because I’m not an out an out front-end developer but a backend developer (Java) and so I usually do not have time to deal with the nuances of css in laying out and styling pages. I also think a framework can help out in enforcing a standard way of doing things for teams.

  • http://seolar.de seolar

    I think it doesn’t matter if you use 960gs as CSS framework or something else like Blueprint, 1kb or OOCSS. The base of leight and small code base is everytime the same case. Before publishing a website you have to think about your work twice and more times. Sometimes it makes sense to reduce the usage of div elements and use more semantic code instead, sometimes you better reduce classes. But the final result should be every time of developing a website the smallest result you can get which is understandable for most of code readers (like your co-workers, yourself, friends, sometimes clients).

    And when using a grid system or CSS framework you have to know a lot of CSS and HTML so you should be able to write small, semantic and valid code…

    - Greetings from Germany to WDD and readers -

  • http://ipoptal.mp Tihomir Ipotpaliev

    You are the best, man! G.!

  • http://www.invision-studios.com Sherm Stevens

    Ben,

    Excellent article.

    It seems to me that many designers here are looking at the grid only as a technical solution to layout, when (IMHO) it really is an aesthetic solution.

    The purpose of the grid is to give structure and consistency to your pages. Once you have a grid in place, it really makes a design (web site, book, magazine, whatever) come together.

    There’s so much repetition in creating pages, a grid takes some of the grief out of it.

    • http://www.communityspiritacupuncture.co.uk Andrew Nuttall

      totally agreee.

      and thanks, ben for the article.

  • http://www.timbrookes.co.uk Tim Brookes

    Excellent post, thanks.

  • Jon L

    Thank you for this article. It was very helpful.

  • http://imbrian.net gmonk

    Great article! So this is one more option out there (which is nice).

    I’m always trying to streamline my xhtml/css. This is not the way to do it, however. I agree with most of the responses here. Layout should be as simple as possible. I think it’s more of a personal preference and with css, you shouldn’t really need a framework. I’m constantly trying to see how few elements i can get away with in my css. It’s not just fun to do that, but it’s almost like i’m trying to better myself each time i do it.

    I am trying to always figure out how to standardize certain layout elements, too. I usually base my layouts off of a 5 column layout, but then i keep those flexible by combining widths/margins/padding so rather than looking so grid-like, you have the option of using a wider column that is as wide as say, 1column, 2 columns, 3 columns, 4 columns.

    There is just no way I can tell if that makes any sense at all. I’m still trying to wake up, actually. I’ll just stop now ;)

  • http://juliangaviria.net Julian Gaviria

    I spent about 45 minutes on this page, going through the article and reading through everyones comments (great article btw). I was on the brink of using the grid system on my upcoming project until I stopped by the 960.gs website and saw the purpose for their service. Now I’m even more frustrated.

    • Mal

      are you stuck on the rapid prototyping bit?

      coz – I have used 960 succesfully on production site.

      works lovely – cross browser, etc.

      saves me so much time now!

  • http://www.designcabi.net Bambi Corro III

    Got here from 960.gs site… thanks for the thorough tutorial! I’m working my arse around this grid system.

  • http://www.pixelzdesign.com Zlatko Malinovic

    960.gs is very usefull site. Excellent tool for making grid. Thx

  • http://kylemanning.com Kyle

    Super article. I really needed this information. I’m more of a developer than a designer, but I’m a one man shop so I have to wear many hats and this article was super easy to understand for a non-designer. Thanks.

  • Todo

    What file is better? index1.html or index2.html. Thanks. I’m developer, and this is my first code using 960

    File:index1.html

    Untitled Document

    breadcrumbs

    logo
    menu

    search

    photocall

    slideshow

    izq1
    izq2

    der1

    der2

    footer

    File: index2.html

    Untitled Document

    breadcrumbs
    search

    logo
    menu
    photocall

    slideshow
    zonacliente

    cell content
    cell content
    cell content

    footer

  • http://benthinkin.net Ben Gremillion

    It seems like your HTML didn’t come through. Can you post links to these two files elsewhere online?

  • http://todo.site88.net/ Todo

    My question is: What is the way to optimize the “layout” created with framework 960.gs?

    In http://todo.site88.net/index2.html and http://todo.site88.net/index.html I present the same content distribution: one with more containers and the other less. Or is it better to create a large container and within the all cells?

    Thanks you in advance

  • http://benthinkin.net Ben Gremillion

    Using 960.gs, grid_x within grid_y often doesn’t work because fixed-width columns with margins don’t add up properly when contained by columns of the same width. Your alphas and omegas may help that, but nested grids defeat the spirit of the grid itself.

    I suggest you keep using your strategy in index.html. If you need to sub-divide columns, try creating a narrower set with http://www.spry-soft.com/grids .

  • http://heygrady.com Heygrady

    Use Sass + Compass or something like Less to manage the repeated code in a more efficient manner. The bugs won’t scale out of control if there’s a good tool.

    You can read my article on the subject and see how this might apply: http://heygrady.com/1kb-grid-system-and-sass