Ao
observar outros “liquid based websites”,
vejo duas técnicas comumente utilizadas na exibição de colunas: colunas de largura fixa e colunas de largura variada. Há inconvenientes nas duas que eu gostaria de
mencionar, e então oferecer
a minha solução.

Colunas de largura fixa

A melhor coisa em se ter colunas de largura fixa em um layout é que elas vão
preencher o view port com o máximo de
colunas que podem caber dentro dele. Mas, como você pode ver ali, haverá algumas
resoluções do view port, em que elas
vão deixar um espaço branco em excesso onde uma coluna não foi capaz de
caber. 

Colunas de largura variada

Colunas de largura variada não deixam nenhum
espaço branco, e se ajustam perfeitamente dentro de seu layout. O único lado
negativo disso é que ficamos restritos a ter um número fixo de colunas por
linha.

Smart columns com CSS & jQuery

Uma
solução que poderia beneficiar ambas as situações é pegar os dois cenários e os
transformar em um só.

1. Permita o maior número de colunas de largura fixa a serem alinhadas
   através do view port (quantas
   couberem, baseado no tamanho básico da coluna)
2. Pegue os espaços brancos em
   excesso e os distribua igualmente para cada coluna para completar uma
   linha. Desse modo, as colunas vão sempre se ajustar perfeitamente.
3. Mantenha uma largura fixa
   padrão como base, de modo que as colunas estejam razoavelmente dentro do
   tamanho de colunas desejado, enquanto mantêm flexibilidade o suficiente
   para acomodar o view port
   expansível.

HTML

Comece
criando uma lista desordenada que se comportará como colunas.

<ul class="column">
        <!--Repeating list item-->
        <li>
            <div class="block">
             <!--Content-->
            </div>
        </li>
       <!--end repeating list item-->
</ul>

CSS

ul.column{
	width: 100%;
	padding: 0;
	margin: 10px 0;
	list-style: none;
}
ul.column li {
	float: left;
	width: 200px; /*Set default width*/
	padding: 0;
	margin: 5px 0;
	display: inline;
}
.block {
	height: 355px;
	font-size: 1em;
	margin-right: 10px; /*Creates the 10px gap between each column*/
	padding: 20px;
	background: #e3e1d5;
}
.block h2 {
	font-size: 1.8em;
}
.block img {
        /*Flexible image size with border*/
	width: 89%;  /*Took 1% off of the width to prevent IE6 bug*/
	padding: 5%;
	background:#fff;
	margin: 0 auto;
	display: block;
	-ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
}

jQuery

function smartColumns() { //Create a function that calculates the smart columns

        //Reset column size to a 100% once view port has been adjusted
	$("ul.column").css({ 'width' : "100%"});

	var colWrap = $("ul.column").width(); //Get the width of row
	var colNum = Math.floor(colWrap / 200); //Find how many columns of 200px can fit per row / then round it down to a whole number
	var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column

	$("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions.
	$("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column	

}	

smartColumns();//Execute the function when page loads

$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
	smartColumns();
});

Veja
o  Demo – Tente expandir o view port

Conclusão

Estou
planejando utilizar essa técnica no futuro, se alguém tiver outra ideia,
ou usa outras técnicas, não hesite em compartilhar.

?

Texto original disponível em http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/