Por exemplo, tenho alguma classe .article e quero visualizá-la como exibição em grade. Então eu apliquei este estilo:
.article{
width:100px;
height:100px;
background:#333;
float:left;
margin:5px;
}
Esse estilo fará com que o artigo pareça lado a lado / grade. É um bom trabalho com altura fixa. Mas se eu quiser definir a altura como automática (esticar automaticamente de acordo com os dados contidos nela), a grade parecerá desagradável.
E eu quero fazer a visualização assim:
Você pode usar o flexbox.
Coloque seus elementos em um contêiner flexível de coluna multilinha
Reordene os elementos, para que a ordem do DOM seja respeitada horizontalmente em vez de verticalmente. Por exemplo, se você quiser 3 colunas,
Forçar uma quebra de coluna antes do primeiro item de cada coluna:
Infelizmente, nem todos os navegadores suportam quebras de linha no flexbox ainda. Mas funciona no Firefox.
Mostrar snippet de código
fonte
Agora que o CSS3 está amplamente disponível e é compatível com os principais navegadores, chegou a hora de uma solução pura, equipada com a ferramenta de snippet da SO:
Para a criação de alvenaria layout usando CSS3 o
column-count
juntamente comcolumn-gap
bastaria. Mas eu também costumavamedia-queries
torná-lo responsivo.Antes de mergulhar na implementação, considere que seria muito mais seguro adicionar um fallback da biblioteca jQuery Masonry para tornar seu código compatível com o navegador herdado, especialmente o IE8-:
Aqui vamos nós:
fonte
masonry bricks
. A coluna ordena as coisas de cima para baixo, a pergunta estava pedindo para que a ordem permanecesse na mesma horizontalmente, para não mudar verticalmente. Por exemplo, o menor bloco encontrado acima DEVE estar na terceira coluna, mas na linha superior.A melhor opção para resolver isso apenas com css é usar a propriedade css column-count.
Verifique isso para obter mais informações: https://developer.mozilla.org/en/docs/Web/CSS/column-count
fonte
por exemplo:
Esta é uma grade com 7 colunas e suas linhas têm tamanho automático.
Para obter mais detalhes, acesse o link a seguir: https://css-tricks.com/snippets/css/complete-guide-grid/
fonte
Com o CSS Grid Module, você pode criar um layout bastante semelhante .
Demonstração CodePen
1) Defina três colunas de grade de largura fixa
2) Verifique se os itens com altura grande abrangem 2 linhas
Mostrar snippet de código
Codepen demo
Os problemas:
fonte
e se você quiser ir além da alvenaria, use o isótopo http://isotope.metafizzy.co/ é a versão avançada da alvenaria (desenvolvida pelo mesmo autor), não é CSS puro, usa a ajuda do Javascript mas é muito popular, então você encontrará muitos documentos
se você acha muito complicado, já existem muitos plugins premium que já basearam seu desenvolvimento no isótopo, por exemplo, o Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020
fonte
Há um exemplo baseado em grade .
baseado nesta caneta-código de Rachel Andrew FTW
fonte