Q:

Div com float não se ajusta a grade

Estou desenvolvendo um site e ele deve listar algumas especificações de um sistema.
São várias listas de alturas variadas.
Problema: Utilizo o float: left em todas as listas. Eu esperava que as listas se ajustassem automaticamente, tando na direita quanto a esquerda. Mas como o esperado, isso não aconteceu.
Seguem fotos para melhor entendimento:

A:

Sempre forneça o código necessário para a resolução do problema. A solução é utilizar a propriedade display: inline-block, assim todas as listas se alinhariam uma ao lado da outra. Junto a isso, você também pode utilizar a propriedade vertical-align para controlar como o posicionamento das listas irão se comportar. Dentre diversos valores, o que mais deve se adequar à sua necessidade é o middle, que posiciona centralmente um elemento em relação ao eixo Y.
Utilizando o código que você forneceu em sua resposta, fiz um exemplo no JSFiddle: http://jsfiddle.net/hr719e5f/1/. Em fullscreen para ver melhor: https://jsfiddle.net/hr719e5f/embedded/result/

