Eu estava precisando fazer um site com um layout de 4 colunas e como CSS não é o meu forte, saí procurando alguma solução já pronta. Acabei encontrando o blueprint e com a configuração padrão dele você consegue fazer um grid com até 24 colunas de 30 pixels e com largura total de 950 pixels.

Para fazer um grid você cria um “container” e dentro do “container” você define divs para cada coluna usando a classe “span-x” onde x vai ser o número de colunas a serem ocupadas pelo div. No meu caso eu queria 4 colunas de tamanho igual (total 24 colunas dividido por 4 partes = 6 para cada span), então fiz:

<div class="container">
        <div class="span-6">
                Coluna 1
        </div>
        <div class="span-6">
                Coluna 2
        </div>
        <div class="span-6">
                Coluna 3
        </div>
        <div class="span-6 last">
                Coluna 4
        </div>
</div>

Note também que no último div ainda temos que colocar a classe “last” para informar qual a última coluna.

Dá pra fazer mais coisas com grids, como grids aninhados (um dentro do outro) e customizar o tamanho do grid. O blueprint ainda possui mais algumas coisas como estilos para fontes e forms, mas no geral o blueprint é bem básico e enxuto.

Para maiores informações o site do blueprint é esse: http://code.google.com/p/blueprintcss/

Outra solução é usar o YUI (Yahoo! User Interface Library), mas especificamente para essa parte de layout achei que o html do YUI fica mais poluído que o blueprint. Só que o YUI tem muito mais funcionalidades, quem sabe uma hora eu faço algum post sobre ele.