10 trechos de código de grade CSS úteis

A especificação de grade CSS não é exatamente “nova”, mas é definitivamente mais nova no mundo dev mainstream. Muitos codificadores frontend ainda não sabem sobre as propriedades de grade CSS, muito menos como elas se aplicam a uma interface.

Você pode encontrar muitos tutoriais pesquisando, mas também recomendo estudar trechos de código. Dessa forma, você está mergulhando em projetos do mundo real para ver como as grades CSS funcionam em uma página da Web ao vivo.

Essa coleção deve oferecer muitos recursos para ajudá-lo a aprender, personalizar e redefinir o estilo das grades CSS para qualquer coisa que você esteja fazendo na web.

1. Bloco herói multi-imagem

Vamos começar com este bloco de herói muito legal projetado com propriedades de grade. Esse design imita a seção de imagem principal da página inicial que você encontrará em muitos sites estilo revista.

A desenvolvedora Rachel Andrew criou isso usando um pouco de CSS personalizado de seus próprios projetos. Funciona incrivelmente bem, e o design é totalmente responsivo à inicialização.

Sem mencionar que parece fantástico em telas móveis; não é algo que você sempre encontra com grandes blocos de imagem.

Este é um excelente recurso para estudar grades CSS e um trecho útil para quem codifica um tema de blog no estilo de revista.

2. Layout de grade CSS

A propriedade grid-auto-flow está em exibição total com esta demonstração usando a configuração “dense”. Isso força os itens a se encaixarem ainda mais na página à medida que a grade é redimensionada.

Com essa configuração, você tem muito controle sobre quais elementos da página mudam de posição, onde essas mudanças acontecem e como a grade deve responder. Isso ocupa um lugar de destaque em relação às consultas de mídia que são usadas principalmente em design responsivo.

Se você não tem certeza do que esse código faz, lembre-se: o Google é seu amigo! Muitos ótimos posts e tópicos do Stack Overflow cobrindo toda essa configuração.

3. Fatos não tão assustadores sobre abóboras

Aqui está um trecho bem legal criado com alguns fatos básicos sobre abóboras. Bem, fatos de abóbora organizados por um layout de grade CSS.

O código realmente é executado em SCSS/Sass, o que significa que você precisará de alguma familiaridade com a linguagem para se aprofundar. Mas você também pode compilar o código Sass em CSS bruto diretamente dentro do CodePen se quiser ver as propriedades básicas.

Uma das minhas coisas favoritas sobre este design é a cor e a tipografia. Realmente grita Halloween com o ícone de abóbora e todos aqueles tons de amarelo/laranja.

4. Layout Automático Hexagonal

Este é talvez um dos projetos mais práticos que encontrei para esta galeria. Dê uma olhada neste estilo de grade e tente redimensionar seu navegador.

Você notará que os itens em formato hexagonal se reformatam para caber na página de acordo. Esta é provavelmente a melhor maneira de lidar com páginas complexas com muitas fotos. Muitas vezes vejo esse tipo de layout em sites de conferências e páginas “sobre nós” para empresas com muitos funcionários.

Agora, com a estrutura de grade CSS, você não precisa se preocupar com estilos responsivos manuais. E este trecho de código é o melhor ponto de partida para planejar um layout semelhante.

5. Pokedex em CSS Grid

Ainda não vi nada tão criativo quanto este Pokedex em uma grade CSS. Ele se baseia em HTML e CSS com um pouco de JavaScript para preenchimento automático de tamanhos de células.

Conforme você redimensiona a página, você notará que os gráficos também aumentam de tamanho. Isso é muito fácil de lidar com CSS, e é ainda mais fácil quando você aprende algumas das propriedades da grade.

Observe que isso não é interativo, portanto, você não pode clicar em nada ou abrir novas páginas. Mas com a base do layout definida, seria muito simples adicionar esses recursos.

6. Grade Simples

Aqui está uma ideia muito interessante que traz estilos de design de impressão para a web. Dê uma olhada neste exemplo no CodePen com muitas colunas com cabeçalhos e tipografia superdimensionada.

O layout da grade em si depende de colunas definidas com intervalos predefinidos. Isso significa que à medida que você redimensiona o navegador, certas colunas são divididas de acordo com essas regras.

É uma excelente maneira de garantir que certas colunas sempre apareçam próximas umas das outras, ou pelo menos apareçam à vista, para que sejam fáceis de ler.

7. Grade CSS com Flexbox Fallback

Nem todos os navegadores alcançaram a estrutura de grade CSS. É por isso que este trecho ensina como criar uma grade CSS personalizada usando flexbox (e floats) como fallback.

Isso é realmente complicado, pois você deseja usar as propriedades da grade se elas forem suportadas, mas deseja que o navegador as ignore se não for. Felizmente, o código está bem comentado para que você possa pesquisar e até tentar ajustar alguns dos recursos por si mesmo.

Eu não chamaria isso de uma solução de fallback perfeita, mas é definitivamente melhor do que nada.

8. Demonstração de terminologia de grade

Não tem certeza sobre toda essa terminologia de grade CSS confusa? Então este trecho pode ajudar a esclarecer as coisas.

Se você se aprofundar neste exemplo, encontrará alguns recursos destacados com anotações explicando as grades ao longo do caminho. Você também aprenderá a ver as linhas de grade corretamente e a ver grades CSS com precisão na página.

Observe que você não vai entender tudo desta demonstração porque ela não cobre tudo. É apenas uma pequena introdução às propriedades mais fáceis com recursos visuais para ajudar.

9. Usando colunas de modelo de grade: repeat()

Para um exemplo muito específico da propriedade grid-template-columns, dê uma olhada nesta demonstração ao vivo. Ele mostra como usar o recurso de repetição em vez de declarar o mesmo valor de coluna várias vezes em seu CSS.

Novamente, o suporte ao navegador ainda está alcançando isso, mas a maioria dos navegadores modernos funciona com essa técnica.

Sem mencionar que você encontrará muitos comentários dentro do CSS para ajudá-lo a entender o que isso faz.

10. Palavras cruzadas de grade CSS pura

Para terminar com uma nota divertida, dê uma olhada nas palavras cruzadas CSS puras de Adrian Roworth. Todo esse layout é construído em nada além de código HTML e CSS, especificamente as propriedades da grade CSS para a estrutura do layout.

O que é ainda mais louco é que você pode inserir conteúdo nas caixas de palavras cruzadas para realmente resolver os quebra-cabeças. Quão legal é isso!

Observe que essa coisa é bastante complexa e é um dos poucos projetos listados aqui que não é compatível com dispositivos móveis. Mas é a prova de quão longe chegamos com layouts de grade na web, então espero ver muito mais desse tipo de coisa em um futuro próximo.