Se o HTML foi a linguagem de código que praticamente fundou o desenvolvimento web tal como conhecemos hoje, o CSS (Cascading Style Sheets) é a linguagem responsável por trazer novos elementos para tornar o visual das páginas ainda mais interessantes.
Por isso, hoje vamos te dar 3 dicas de uso do CSS Grid Layout. Quer saber mais sobre o assunto? Então leia até o fim e confira tudo o que separamos para que você possa aumentar ainda mais seus conhecimentos!
Enquanto o primeiro é utilizado na estrutura de um documento web, com a definição de elementos como parágrafos e cabeçalhos, além de permitir a inserção de imagens, vídeos e outras mídias, o CSS tem enfoque maior no Estilo de seu documento: cores, fontes, layouts de páginas - todos têm seu “dedinho”.
É como se o HTML fosse um lugar, como a casa, o prédio onde você mora, e o CSS ficasse a cargo de toda a parte estética da arquitetura.
E é através da interação entre elementos de ambas as linguagens que uma página web é desenvolvida. Algumas vantagens no uso desse feature são:
Redução do tamanho dos arquivos. Como o CSS Grid é nativo, não há necessidade de incluir grandes bibliotecas como Bootstrap nos seus projetos
- Semântica otimizada. Frameworks como Bootstrap frequentemente levam desenvolvedores a se aventurar em territórios divits. Além disso, estruturas grid nem sempre utilizam os nomes de classe mais semanticamente sonoros;
- Velocidade de desenvolvimento. Uma vez que você aprende a sintaxe, a prototipação com CSS Grid será veloz e eficiente.
- Redução do bloat do código. Em vez de criar elementos HTML extras para conter seu grid, colunas e linhas, os tracks do seu grid são criados através de sua folha de estilo (stylesheet).
Por outro lado, uma desvantagem do CSS Grid é que não é suportado por todos os browsers. Há várias coisas que você pode fazer com ele e nesse artigo vamos dar algumas dicas para sua melhor utilização.
3 dicas de uso do CSS Grid Layout
1. Trabalhar em duas dimensões
Essa é, sem dúvidas, uma das principais dicas de uso do CSS Grip Layout. Não é á toa que é a primeira da lista. Em comparação com outros layouts, como o Flexbox, o CSS Grid é bidimensional.
Ele permite que você trabalhe ao longo de duas direções, onde você pode posicionar precisamente itens em células definidas por linhas e colunas.
2. Foco em posicionamento de conteúdo
O CSS Grid atua na precisa posição de conteúdo. Cada item é uma célula grid, alinhada tanto em setas verticais quanto horizontais. Se seu objetivo é acuradamente ter controle acerca da posição desse itens dentro de um layout, o CSS Grid é o caminho certo.
Nesse sentido, as propriedades desse módulo como grid-template-rows e grid-template-columns e utilidades como a unidade de fração (fraction unit) permitem que você calcule com precisão o comportamento de certos viewports e obtenha resultados surpreendentes.
CSS ainda torna possível criar layouts responsivos sem requerer o uso de consultas de mídia. A ideia foi apresentada em um vídeo do YouTube sobre layouts algorítmicos por Heydon Pickering.
Ele introduz uma simples técnica de Grid capaz de embrulhar as células Grid e adaptá-las para viewpors de todos os tamanhos:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: 1rem;
}
3. Flexibilidade junto ao HTML
Assim como HTML, o CSS é escrito em um simples texto através de um programa editor de textos ou mesmo word em seu computador.
Existem três maneiras de adicionar o código nas páginas HTML: externo, interno ou inline.
Externo: folhas de estilo externas são salvas como arquivos .css e podem ser usadas de modo a definir a aparência de um website por inteiro por meio de um arquivo (em vez de adicionar instâncias individuais de código CSS para cada elemento HTML que você deseje ajustar).
Isto vai linkar o arquivo .html junto à folha de estilo externa (representada, no exemplo acima, como mysitestyle.css), e todas as instruções CSS naquele arquivo serão então aplicadas nas suas páginas .html.
Interno: folhas de estilo internas são instruções CSS escritas diretamente no cabeçalho de uma página .html, o que é especialmente útil se você tiver uma página única em um site que possui apenas um visual.
Inline: estilos inline são fragmentos (snippets) de CSS diretamente escritos em código HTML e aplicáveis unicamente em uma instância de código individual.
Essa codificação geraria apenas um cabeçalho específico em uma página .html com aparência de violeta, fonte de 40 pontos.
De um modo geral, folhas de estilo externas são o mais eficiente método para implementar a linguagem CSS em um website, pois é bem mais fácil acompanhar e desenvolver o estilo de um site original de um arquivo CSS.
Por outro lado, arquivos de estilo interno e inline funcionam numa base singular, caso a caso, quando mudanças individuais precisam ser realizadas.
Conclusão
E aí, o que achou das nossas 3 dicas de uso do CSS Grid Layout? De modo bem resumido e recapitulando as informações, o HTML está na fundação, molduras e estrutura de seu site, enquanto o CSS Grid Layout desenvolve as cores, estilos de janelas e toda visualização que virá em seguida.
Faça bom uso e aproveite os recursos que vão tornar sua página ainda mais bonita e interessante!
Gostou de nosso post? Compartilhe:
