Categorias
CSS Dicas Front-end Geral

Grid Layout sem Segredos (amostra)

Atenção: Este conteúdo é uma amostra grátis do livro Grid Layout sem Segredos.

O conteúdo foi adaptado para exibição na web, e pode ter uma apresentação ligeiramente diferente do e-book original.

Grid Layout Sem Segredos (Capa do livro na Amazon.com.br)

Quebrando as regras do CSS

Grid Layout sem Segredos

Copywright © 2021 by Dorian Torres

Todos os direitos reservados

Por que você deve ler este livro

Ao longo de minha carreira profissional como desenvolvedor de sistemas, a construção de layouts sempre fez parte do dia a dia.

Para isso, me deparei e construí inúmeras possibilidades diferentes de construir layouts e estruturas. Além disso, acompanhei a evolução de diversas tecnologias de back e front-end ao longo dos anos. Entre essas tecnologias, observei também as diversas atualizações de tecnologias como PHP, Javascript, JAVA, C#, elaboração de Design Patterns diversos, desenvolvimento de processos, surgimento de frameworks como React, Vue.JS, Angular, Node JSe é claro: o CSS faz parte disso.

E como é natural, toda essa evolução costuma gerar confusão e dificuldade no aprendizado, principalmente em quem está iniciando na área.

Afinal, hoje em dia nos deparamos com uma característica importante, que é, ao mesmo tempo, a solução e problema: A quantidade de informações disponível.

Costumo chamar de solução pois nos fornece um mar de possibilidades para pesquisa e aprendizado, nos mais diversos canais: livros, audiobooks, vídeos no Youtube, artigos de blog, exemplos em vários idiomas, códigos abertos para serem baixados e testados, editores de texto diversos.

E também costumo dizer que é um grande problema pelo seguinte motivo: Geralmente, enfrenta-se alguma dificuldade em organizar suas ideias e pensamentos, e construir uma boa estratégia de aprendizado.

Sim, a overdose de informação é um problema complicado…

Por causa disso tudo, eu resolvi reunir toda minha experiência, conhecimento, técnicas, estratégias de aprendizado, e então, elaborar um material rico e cheio de conteúdo, com exemplos e formas de elaboração distintas.

A intenção é facilitar seu aprendizado.

Eu quero fazer com que este livro seja um manual que abra as portas e janelas em sua mente, que ajude seu cérebro a fazer as conexões neurais da forma mais eficiente possível. E é claro: não descartando os demais materiais ricos que já existem por aí.

Somos todos uma grande comunidade, reunida para somar, e multiplicar projetos e soluções. Leia os demais livros, assista os outros vídeos, e absorva conhecimento de outros profissionais. Lembre-se: Nossa mente nunca se farta de conhecimento.

Introdução

Grid layout e suas peculiaridades.

O layout em grid é uma estratégia inteligente e interessante, que requer alguns cuidados e planejamento no seu uso.

Neste livro você vai entender e aprender como utilizar de forma simples as estruturas e propriedades do grid layout de uma vez por todas.

Você também vai entender quais os momentos ideais para utilizar o layout em grid e como fazer as variações necessárias em telas diferentes (layout responsivo).

Após a leitura, envie seu comentário, e deixe sua avaliação na Amazon, pois isso contribui muito para que projetos como este sejam cada vez mais relevantes e possamos trazer a cada dia trazer novas informações e material de estudo consistente pra você.

Boa leitura e bons estudos!

Conceito do Grid Layout

O conceito do layout em grid é tão antigo quanto as primeiras versões de software que possuíam alguma apresentação visual.

Sim, o layout em Grid não é algo exclusivo no mundo web.

A propósito, as tabelas no html (table) são exatamente uma forma “emprestada” de se construir um grid.

No sentido literal da palavra, grids são “grelhas” ou “redes”.

São estruturas construídas que seguem à base de linhas e colunas.

Como planilhas Excel.

Portanto, sempre que você precisar estruturar informações, semelhante ao que acontece em uma planilha de dados, uma tabela ou até mesmo organizar um layout, o grid layout pode ser a estratégia ideal a ser utilizada.

É muito importante lembrar que a estrutura de um grid pode ficar comprometida em estruturas responsivas (como celulares). Isso não é uma regra, mas requer alguma atenção.

O layout flexível, por exemplo, é mais adequado para construir layouts que se adaptam com facilidade.

No entanto, tudo vai depender do estudo do projeto e da análise da experiência e interface do usuário (conhecidos atualmente como UI e UX).

Grids tem a tendência de ser dinâmicos até certo ponto, mas obedecendo uma certa estrutura rígida, específica e contínua.

Estrutura em Grid

Entender a estrutura do Grid é muito importante para dominar suas funcionalidades.

Para fins didáticos, resolvi separar neste livro a estrutura do Grid Layout em 4 partes:

  • Container
  • Template
  • Item
  • Áreas

Container do Grid (Grid Container)

container é o recipiente que contém o todo o conteúdo do grid. No CSS, este container é definido com display: grid;

Todos os elementos HTML que estiverem dentro do container se comportarão como um item do gridÉ neste container que definimos todas as diretrizes de como o grid funcionará. Definimos o comportamento de linhas, colunas, áreas e templates.

A regra geral do grid é definida do container. Essas regras podem ser sobrescritas ou complementadas nos itens (grid-items).

Um container sem nenhuma definição é criado como um grid 1×1. Ou seja: possui uma linha e uma coluna.

Cada novo elemento adicionado se transforma em uma nova linha ou nova coluna do grid, dependendo das configurações (você entenderá isso mais adiante). A intersecção entre linhas e colunas formam as células do grid.

Eventualmente, um item pode ocupar uma ou mais células. Como acontece quando usamos a função mesclar no Excel.

A definição do container é feito da seguinte forma:

.grid-container{
display: grid;
}

Um item do grid pode se comportar como um outro grid, porém, essa funcionalidade não herdada automaticamente.

Se você desejar que um item do grid se comporte como um container (outro grid) dentro do grid principal, é preciso fazer a declaração de forma explícita.

Lembrando que este é um novo grid, com comportamentos e regras próprias. Ele não herda as funcionalidades do grid principal.

Veja no exemplo:

css
.grid-container{
display: grid;
}
.item.grid2 {
display: grid;
}

Dessa forma, o item do grid que tem a classe CSS “grid2” se comportará como um grid.

Templates do grid (Grid Template)

Os templates do grid são o “desenho” do grid.

É a configuração responsável por informar o que será exibido e como os itens serão dispostos ao longo do layout em grid.

Os templates são definidos dentro do grid container.

Podemos definir os seguintes templates para um grid:

  • Template de linhas (grid-template-rows)
  • Template de colunas (grid-template-columns)
  • Template de áreas (grid-template-areas)

Para fins didáticos, vamos explanar os templates de linhas e colunas, e em uma seção separada, o de áreas, pois possuem um comportamento ligeiramente diferente.

Dependendo das necessidades do projeto ou até mesmo familiaridade e preferência pessoal, é possível utilizar uma ou outra abordagem.

Item do grid (Grid Item)

O item do grid é o elemento que armazena o conteúdo.

Como dito antes sobre a estrutura, um item pode ocupar uma ou mais células do grid.

Fazemos essa definição informando as linhas e/ou colunas utilizadas, ou através dos nomes de áreas.

Podemos definir a mescla de células informando a coluna inicial e final, por exemplo, fazendo com que o item ocupe várias colunas.

Podemos também transformar um item do grid em outro grid, ou em um container de outro layout diferente (um layout flexível (flexbox) por exemplo).

Naturalmente, como qualquer elemento html e css, os itens do grid também aceitam suas próprias definições de estilos, cores, fonte, e qualquer outra atribuição independente.

Áreas (Grid Area)

O conceito de áreas é uma abordagem particularmente interessante, pois permite uma manipulação mais fácil de ser lida, por trabalhar com identificadores (nomes ou alias) específicos.

Sendo assim, torna-se uma tarefa relativamente simples e de melhor compreensão atribuir valores aos respectivos itens, quando necessário.

Uma área pode ocupar uma ou mais células do grid. E assim, podemos atribuir uma área a um item (através da propriedade grid-area).

Aplicação Prática

Para continuar lendo este material, adquira o livro na Amazon: