Olá, pessoal!
Se você ainda não passou por isso, um dia chegará o momento em que você precisará de colunas (grids) que comportem conteúdo dinâmico (portanto devem ser responsivas), porém todas devem acompanhar a mesma altura entre si.
Já pesquisei bastante a respeito e o que mais se encontra por aí são soluções que se aparentam a um tipo de "clear fix", que na verdade mais dificultam do que ajudam.
Muitos desses tutoriais mais parece magia, porque acaba sendo quase impossível entender como funciona tal gambiarra.
A boa notícia é que o CSS3 veio com força para potencializar o desenvolvimento front-end. Estou falando da propriedade Flex.
Em suma, esta propriedade deixa seus divs com a mesma altura considerando a altura do maior elemento, e mantém a proporção desejada de acordo com a preferência do desenvolvedor.
Sem mais delongas, vamos ao HTML:
<div class="content-grids">
<div class="colUm">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
</div>
<div class="colDois">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
</div>
<div class="colTres">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
</div>
</div>
Basicamente, acima temos três divs com conteúdos diferentes. Todas dentro de um div pai que será quem comportará os elementos dinâmicos
Agora vamos ao CSS:
.content-grids{
width:900px;
margin:auto;
background:#faa;
display:flex;
}
.content-grids .colUm{
flex:2;
background:#afa;
}
.content-grids .colDois{
flex:1;
background:#aaf;
}
.content-grids .colTres{
flex:3;
background:#aff;
}
Com este CSS estabeleço uma largura para o elemento pai das colucas, e o centralizo dando uma cor de fundo. A magia acontece quando o passados a propriedade display:flex;.
Para cada coluna filho, estabeleço uma proporção para a propriedade flex e uma cor de fundo para diferenciarmos.
O resultado então será algo parecido com isto:
Porque?
A proporção atribuída para o Flex em cada coluna, trabalhará como regra de três de acordo com a largura total do elemento pai. Como no total temos uma soma de 6 distribuídos entre as colunas, considerando a largura do elemento pai de 900px, 1 (uma) parte dessa largura será igual a 150px.
Sendo assim, a coluna UM terá largura de duas partes do elemento pai; a coluna DOIS terá largura de uma parte do elemento pai; e a coluna TRÊS terá três partes do elemento pai.
Dessa forma, produzimos a primeira coluna com 300px de largura, a segunda com 150px e a terceira com 450px, totalizando os 900px do elemento pai.
É possível deixarmos todas as colunas com a mesma largura. Basta atribuirmos 1 (um) para cada coluna, e então a largura total do elemento pai será distribuída de forma igual, ficando assim cada coluna com 300px (neste exemplo).
Prontinho! Dessa forma garantimos que todas as colunas acompanharão a altura da coluna maior, e respeitarão a proporção de largura que definirmos para cada uma!