Grid systems - float ou inline-block

[buchalla]

Galera, estava procurando alternativas para grid systems, e me dei conta que é muito mais comum, encontrar grids feitos com float, do que com inline-block.

Sei que ambos tem suas vantagens e desvantagens, mas ao meu ver conseguir manipular o alinhamento vertical dos elementos é uma baita vantagem, e mesmo assim é predominante o uso com float.

Gostaria de saber a opinião de vocês sobre o assunto, e qual dos dois vocês usam.

ps. vamos esquecer o flexbox por hora ok ?

[mikejavier]

Sinceramente, difícil esquecer o flexbox até por ser uma tecnologia que chegou para resolver alguns problemas enfrentados pelo float. Vai ser mais ou menos 1 ano que troquei o Jeet pelo Lost e só obtive vantagens.

[iamgbayer]

Então, acho que a questão de não abordar o flexbox pode até ser pelo suporte, e acho que uma vantagem de se trabalhar com display é o uso do vertical-align pra pra trabalhar o alinhamento das colunas de um grid, o jeet por exemplo utiliza position no método align() junto com transform que pode ter a questão de suporte.

[batoreh]

Os pontos em usar float e inline-block para contrução de grids é que:

1. Eles não foram pensados para resolver esse problema.
2. Se eles resolvem esses problemas é por mal uso do programador.

Dos dois citados, o menos pior acredito que seja o inline-block, pois o float mexe com muitos fatores e até hoje sua renderização é estranha em algumas engines. É o tipo de coisa que quando funciona a gente tem que evitar mexer.

Eu só não entendi o porque do "vamos esquecer o flexbox". É questão de suporte?

[iamgbayer]

@netoguimaraes, acredito que não seja por mal uso do programador, porque a tempos atrás utilizavamos grids que usavam apenas float ou inline-block, quanto ao suporte que me referi é um caso que junto ao @buchalla96, temos que dar suporte a um browser que tem a engine do adobe air, onde não há suporte nem pra calc(), muito menos pro querido flexbox.

[buchalla]

@netoguimaraes, concordo que os dois não são ótimas soluções, mas a questão é, já que as vantagens de usar inline-block aparentemente são melhores, então porque é muito mais comum encontrarmos grids feitos com float ?

[drunksheep]

@buchalla Acho que o pessoal usa mais float pra não ter que resetar o font-size do pai e evitar aqueles espacinhos que o inline-block às vezes tem. Eu tenho usado os dois ultimamente já que preciso dar suporte ao ie9.

[felipefialho]

@Mendrone

[danilowoz]

@drunksheep eu costumo resetar o espaçamento entre letras, que também funciona.
Particularmente eu prefiro inline-block, para evitar clearfix. Ambas abordagens precisam de um reset para funcionar perfeitamente.

.container {
    letter-spacing: -1em;
}
.container > * {
    letter-spacing: 0;
}

[felipefialho]

Exato @danilowoz, no fim, tanto float quanto display: inline-block precisa de hack para funcionar.

Creio eu que a maioria dos Grid-systems usarem float é herança de versões antigas de IE, que ficavam mais estáveis usando float, acabou que depois que essas versões foram extintas, ninguém mais pensou em mudar.

[leandroruel]

thank god as coisas estão mudando

[lcquadros]

@buchalla, costumo usar um ou outro de acordo com a necessidade do projeto.

A maioria dos grid systems que uso preciso alterá-los e usá-los ligados com cuidado ao reset para que recebam clearfixes, posicionamentos verticais e/ou horizontais e collapses quando necessário. Os grid systems usam opções que tentam ter a mesma visualização em diversos devices. Apegar-se ou ter uma opinião radical sobre um outro é bobagem, até porque com o tempo são substituídos por inovações no CSS e essas inovações acabam levando-os ao desuso.