Resolvendo lacunas nas linhas empilhadas do Bootstrap

Ao construir uma grade Bootstrap para uma página de portfólio, você pode encontrar um problema onde blocos mais longos causam uma lacuna no layout ao empilhar ocorre. Este problema surge devido às diferentes alturas dos elementos dentro da grade. Para resolver isso, existem diversas soluções:

1. Definir uma altura para todos os elementos do portfólio: Estabelecer uma altura fixa para cada elemento do portfólio garante um empilhamento consistente, eliminando lacunas.
2. Usar alvenaria para ajuste dinâmico: Alvenaria é uma ferramenta de layout que organiza elementos dinamicamente para se ajustarem ao espaço disponível, eliminando lacunas mesmo com conteúdos variados lengths.
3. Empregue classes responsivas e Clearfix: Conforme definido na documentação do Bootstrap em "Redefinições de colunas responsivas", esta abordagem envolve o uso de classes responsivas e clearfix para resolver problemas de alinhamento de grade em diferentes pontos de interrupção.
4. Utilize jQuery para ajustar as alturas das colunas dinamicamente: jQuery pode ser usado para ajustar as alturas das colunas dinamicamente, garantindo que eles se alinhem corretamente, independentemente do comprimento do conteúdo.

Aqui está uma técnica específica para resolver o problema:

Adicione uma div clearfix após cada elemento da grade:

    

        ...
    
    

Aplique uma consulta de mídia à div clearfix para limpar o float:

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        clear: both;
    }
}

Essa abordagem fornece:

• Marcação legível e sustentável: O HTML permanece simples, permitindo fácil gerenciamento dos elementos do portfólio.
• Alinhamento em diferentes tamanhos de tela: O CSS garante que os elementos sejam alinhados em todos os pontos de interrupção comuns, eliminando lacunas.