Vamos lá, primeiramente o que seria um Grid?
Um grid é uma malha composta essencialmente por linhas guias, colunas e margens. Esta rede serve para definir as relações de alinhamento, proporção e posicionamento dos elementos de um layout. A intenção do grid é facilitar a diagramação de grandes quantidades de informação e guiar o olhar do leitor.
Por que utilizar um Grid?
São muitas as vantagens na criação baseada em grids. Organizar informações é a principal função, mas podemos citar orientação da atenção do leitor através de focos visuais, simplificação do processo de criação, estruturação de hierarquia e agilidade de produção como outros benefícios. Grids aumentam a precisão de um layout e são ótimas ferramentas para criar dinamismo.
Referência: http://blog.popupdesign.com.br/perguntas-frequentes-sobre-grids/
Sobre o 960 Grid System:
Diversas pessoas usam e aprovam o sistema porém ele está ultrapassado já que foi desenvolvido em um período onde a resolução mais popular era 1024x768px.
Outro ponto é que ele é limitado a simplesmente 960 pixels, ou seja, se você for trabalhar com larguras maiores você terá que praticamente refazer o grid, pois não é tão simples ajustar as larguras das colunas e margens.
O maior problema (em meu ponto de vista) é a semântica. Se você é preocupado com semântica e padrões web, inserir classes como container_12
ou grid_7 prefix_1
em seu código é algo que o polui e não é nada semântico.
Exemplo retirado do próprio site (http://960.gs/):
<div class="container_12">
<div class="grid_7 prefix_1">
<div class="grid_2 alpha">
...
</div>
<div class="grid_3">
...
</div>
<div class="grid_2 omega">
...
</div>
</div>
<div class="grid_3 suffix_1">
...
</div>
</div>
E como você pode notar ao entrar no site o aviso:
If you want a responsive grid framework, check out Unsemantic.com
Ou seja, ele não é um grid fluído e nem responsivo. O 960gs recomenda o Unsemantic mas é outro sistema de grid que carrega os mesmo problemas do 960gs.
Sobre o bootstrap:
É um sistema de GRID incrível que permite trabalhar com as resoluções mais atuais.
Ele não tem a mesma limitação do 960gs e você pode trabalhar com larguras maiores utilizando suas classes XS SM MD LG
, ele é fluído e pensado para mobile first.
Mas possui o mesmo problema do anterior. Ele é completamente baseado em classes e muitas delas nada semânticas o que pode acontecer de ficar assim col-md-xs-lg-motherfucker
.
Outro ponto negativo é todas aplicações que usam o bootstrap acabam tendo a mesma identidade, isso faz com que você não se destaque no meio de várias interfaces praticamente iguais.
Conclusão:
Acho que o bootstrap é o mais adequado já que o 960gs tem bem mais limitações e o bootstrap atende bem ao inicio já que ele foi criado para ser um framework de inicialização.E le faz esse trabalho muito bem, mas ele não foi criado para ser a base de interfaces customizáveis.
O que recomendo realmente é que você siga as boas práticas (variáveis, módulos e estrutura de arquivos) que esses frameworks trazem e construir o seu próprio framework se for necessário.
Mas o que eu acho é que você deve buscar alternativas mais semânticas já que não se faz necessário o uso de classes e não será necessário "sujar" o seu código, e os Grids semânticos fazem isso muito bem pois eles utilizam pré-processadores SASS, LESS, Stylus
que calculam matematicamente o valor das colunas em pixels e transformam estes valores em porcentagens. Ou seja, através de mixins e variáveis eles definem através do próprio CSS a largura dos elementos.
Um exemplo seria o Semantic GS onde você define a largura da coluna, a margem e o número de colunas e o pré-processador gera o código com as devidas larguras, sem a necessidade de se utilizar classes.
Uma alternativa é o Jeet GS que é o melhor grid na minha opinião pois, você pode trabalhar com medidas como 1/3
(1 terço) ou 2/3
(2 terços) da largura do site e tem muitos utilitários que facilitam o desenvolvimento e ambos Jeet e Semantic são fluídos e responsivos.
Agora basta escolher o que mais se adequar a sua necessidade.