Aprenda grade de CSS por exemplo

1. Apresentação do curso: [MÚSICA] Oi, lá. Mais uma vez, bem-vindo. Sou Daniel e venho fazendo com o Mellow One há mais de 15 anos. Este é o meu curso sobre como aprender CSS Grid por exemplo. CSS Grid ao lado da caixa de peste simplificou a última maneira como estamos gerando layout de página. O escopo deste curso é fornecer o conhecimento necessário para usar o CSS Grid em suas páginas da Web e interfaces. Farei isso construindo alguns pequenos exemplos. Vamos começar. Temos algumas coisas simples, como configurar uma grade básica, como definir seus elementos ou como colocar elementos dentro de conjuntos. Depois disso, avançaremos gradualmente para diferentes maneiras de tornar nossas grades responsivas, como combinar o CSS Grid com outros gerenciadores de layout, como Flexbox e Mode. Faremos muita codificação nas pontuações e cada lição tem seus arquivos de exercícios e soluções para todo o código. Estou ansioso para vê-lo na próxima lição em que começaremos a construir para o projeto CSS Grid. [MÚSICA] 2. Exemplo 1 - Introdução ao projeto: Olá e seja bem-vindo. Isso é o que vamos construir neste primeiro exemplo do curso CSS Grid. Primeiro, veremos como configurar uma grade básica, como ela funciona, como definiremos as linhas e colunas e como definiremos os tamanhos. Falando em tamanhos, veremos um recurso muito bom do CSS Grid chamado minmax que nos permitirá criar layouts responsivos sem usar consultas de mídia. Sim, você ouviu isso direito. Esse layout muda com base nas dimensões da janela de exibição, mas não usa nenhuma consulta de mídia. Além disso, veremos como posicionar manualmente os itens nas células ou como fazê-los se estender por várias células. Vamos ver o que temos nos arquivos iniciais para este exemplo. Cada lição tem sua própria pasta contendo um arquivo inicial no qual você pode trabalhar e o arquivo final que você pode verificar no final de cada episódio. Este é o ponto em que começaremos. Na lição 1, inicie esse HTML. A estrutura HTML é bem simples. Temos um grande contêiner chamado items-grid, e dentro deste contêiner, temos algumas divs com uma classe de item e h4 mais uma imagem. Há também algum CSS básico, apenas a cor de fundo, algumas bordas e uma altura máxima para a imagem. As imagens são tiradas dessa pasta GOT chamada houses, e aqui você pode ver cada imagem usada no exemplo. Tanto o CSS quanto o HTML estão no mesmo arquivo. Mas tenha em mente que isso é apenas para fins educacionais. Não faça isso em um projeto real. Vamos começar e ver como podemos passar de um layout estruturado como este para essa grade legal que temos aqui. 3. Exemplo 1 - Configuração básica de grade: Vamos tornar esse contêiner uma grade CSS. Para isso, entrarei em sua classe CSS correspondente, neste caso, a grade de itens, e direi aqui exibir a grade. Se salvarmos e atualizarmos, veremos que nada acontece por enquanto. Isso ocorre porque ainda não definimos as colunas ou as linhas da nossa grade. Para definir as colunas, usaremos uma nova propriedade chamada grid-template-columns. Digamos que, inicialmente, queremos definir nossos cartões em duas colunas, cada uma de 200 pixels, definirei um valor de 200 pixels para a primeira coluna e, depois disso, outro valor de 200 pixels para a segunda coluna. Se eu salvar e atualizar, você verá agora que todos os cartões são exibidos neste bom formato com duas colunas, cada uma de 200 pixels. Podemos chegar em mais um, digamos apenas por causa do exemplo, e aqui vou adicionar mais um de 200 pixels e veremos agora que todos os nossos cartões são reorganizados neste layout com três colunas. Uma coisa interessante a se notar é o fato de não termos definido o número de linhas. Não definimos nada sobre o número de linhas. Principalmente este é um padrão comum porque definimos principalmente apenas o número de colunas e o navegador saberá organizar automaticamente o conteúdo com base nesse número de colunas. Basicamente aqui tínhamos no total 10 cartões e eles são organizados automaticamente em um layout de três colunas com quatro linhas, as três primeiras linhas têm três itens neles e a última tem apenas um item. 4. Exemplo 1 - Unidade FRR: Não estamos confinados nesta linha para usar somente pixels. Podemos usar qualquer unidade de medida CSS. Podemos usar porcentagens, podemos usar rems, podemos usar unidades de viewport, podemos usar qualquer coisa. Por exemplo, posso vir aqui e selecionar tudo isso e dizer que tudo bem, quero que cada coluna seja de três rems. Se eu atualizar, veremos agora que temos esse layout confuso. Mas a ideia é que possamos adicionar qualquer tipo de unidades que quisermos lá. Mas vamos querer ter todo nosso layout para expandir o máximo possível neste espaço livre. Talvez uma ideia em que possamos pensar é usar porcentagens. Talvez vamos tentar fazer tudo aqui de 33% e ver como vai. As coisas estão parecendo muito mais organizadas agora. Mas ainda assim, se olharmos mais de perto, veremos que o espaço aqui não é a mesma largura que o espaço aqui. Principalmente isso ocorre porque se adicionarmos tudo aqui, então 33% mais 33% mais 33% mais 33%, obteremos 99%, então ainda teremos um por cento grátis aqui. Podemos vir aqui novamente, usar algo assim para cobrir todo esse espaço. Mas a grade CSS também vem com uma nova unidade de medida, e essa unidade é chamada de fração, a fr. Se você levar tudo aqui e nós o substituiremos por um fr e vamos nos atualizar, veremos agora que temos exatamente o mesmo espaço de um lado ou de outro. Como essa unidade separada funciona, é que o navegador ocupa todo o espaço disponível. Depois disso, divide esse espaço no número total de unidades fr necessárias. Nesse caso, o número total de unidades fr é três, 1 mais 1 mais 1. Cada uma das colunas irá exatamente em um terço de todo o espaço disponível. Agora, por exemplo, se tomarmos a coluna central, faremos com três unidades fr e vamos atualizar, veremos um layout que se parece com isso. O que está acontecendo aqui é que o número total de unidades fr é cinco, 1 mais 3 mais 1. O navegador pegou todo o espaço disponível e o dividiu em cinco unidades. A primeira e a última coluna irão em um fr, o que significa 20% do espaço. Enquanto isso, a coluna central irá em três fr, neste caso, 60% do espaço. 5. Exemplo 1 - Distância de grade: Se você olhar para o nosso layout neste momento, não há espaço entre as células da grade. Haverá casos em que você desejará controlar o espaço entre as colunas, modo que o espaço entre as linhas. Para conseguir isso, podemos usar várias propriedades. O primeiro será a lacuna da linha da grade. Usando-o, podemos definir o espaço entre as linhas. Vou dizer, quero ter 50 pixels de espaço entre as linhas. Também podemos usar a lacuna da coluna da grade. Como você pode imaginar, essa propriedade, controlamos o espaço entre as colunas. Se eu salvar e depois atualizar, podemos ver agora que temos o espaço de 50 pixels entre as linhas e o espaço de 10 pixels entre as colunas. Há também uma abreviação para as lacunas das linhas e das colunas. Em vez de usar duas propriedades diferentes, posso excluir isso e dizer que quero usar uma lacuna de grade. Inicialmente, podemos definir o espaço entre as linhas, 50 pixels como era antes e 10 pixels para as colunas. Agora, se salvarmos, veremos que a saída é exatamente a mesma. A única diferença é que usamos apenas uma propriedade em vez de duas diferentes. Finalmente, se quisermos que esse espaço entre as colunas e entre as linhas seja igual, podemos dar apenas um valor de 10 pixels. Sempre que atualizarmos, veremos que agora há uma diferença constante de 10 pixels entre as linhas e as colunas da grade. É assim que você define a lacuna entre as células dentro da nossa grade CSS. 6. Exemplo 1 - Função de repetição: Nosso layout neste momento só tem três colunas. Mas no mundo real, você pode encontrar situações em que precisará algo como 12 colunas ou até mais. Vamos fazer nosso layout caber em cinco colunas. Inicialmente, este parece bem simples. Vou apenas adicionar aqui mais duas colunas de 1fr, e se atualizarmos você verá que tudo parece como esperado. Mas uma desvantagem é o fato de que essa linha começou a se tornar um pouco mais difícil de ler. Precisamos contar o tempo todo quantos arquivos estão lá novamente. Então, para situações como essa, em vez de escrever várias frs ou várias colunas, o que posso fazer é voltar e pegar essas colunas de modelo de grade e dizer que quero repetir cinco vezes e um fr. Esta linha, é exatamente a mesma que esta. Mas se você olhar para eles, o segundo é um pouco mais fácil de ler. Se eu excluir este e atualizar, veremos que o layout é exatamente o mesmo, mas temos uma linha que é um pouco mais fácil de ler. A função de repetição também tem um truque legal. Podemos dar padrões em vez de valores simples. O que quero dizer com isso, digamos que queremos o tempo todo ter uma coluna que é 2fr e depois disso seguida por outra coluna que é apenas 1fr, e depois disso, eles repetem isso padrão mais um. O que podemos fazer aqui é vir e dizer que olhar, a primeira coluna precisa ser de 2frs e depois disso, a próxima coluna precisa ser de 1fr e repetir esse padrão, 2 vezes. Se eu salvar e atualizar, veremos que obtivemos esta grade, a primeira coluna de 2fr depois daquela de 1fr, depois daquela de 2fr, e a última é 1fr. Basicamente, ele repetiu esse padrão duas vezes. Também podemos dar padrões se quisermos tê-lo assim em nosso código. [PLANO DE FUNDO] 7. Exemplo 1 - Como usar o minmax: Neste momento, mesmo que nosso layout pareça muito bom, ele tem um pequeno problema. Se reduzirmos a janela, se reduzirmos a janela de visualização, você verá que, em um ponto, nossos cartões estão sendo cortados. Isso ocorre porque eles não têm espaço suficiente para caber em nosso layout de cinco colunas. Principalmente isso ocorre por causa dessa altura máxima, definida na imagem que também acionará uma largura mínima que o cartão atende. O que queremos tentar é fazer colunas que cresçam no máximo um fr, mas nunca, passarão por uma largura específica. Basicamente, o que estou tentando dizer aqui é que usaremos essa função minmax que é uma função introduzida especialmente para a grade CSS. Podemos definir que um cartão nunca terá menos 300 pixels e em seu tamanho máximo será para um fr. Se salvarmos e atualizarmos, ainda poderemos ver alguns problemas. Ainda assim, nosso layout não se encaixa perfeitamente, mas pelo menos agora os cartões estão em uma largura mínima de 300 pixels. Para corrigir também esse pergaminho horizontal, o que precisaremos fazer é em vez de dizer que o tempo todo, vamos encaixar tudo em cinco colunas, usarei outra palavra-chave introduzido para grade CSS e é ajustado automaticamente. Esse ajuste automático é algo como tentar encaixar o maior número possível de colunas. Isso irá para um máximo de um fr, mas nunca ficará abaixo de 300 pixels. Agora, depois de atualizarmos a página, podemos ver que temos um bom layout de duas colunas que não serão abaixo de 300 pixels. Se tornarmos a tela maior, você verá que o layout está tentando encaixar o maior número possível de colunas com a suposição de que nunca ficará abaixo de 300 pixels. Usando esses dois, o ajuste automático e o minimax, estamos basicamente construindo um layout responsivo sem usar consultas de mídia. 8. Exemplo 1 - Colocação e extensão de celular: Por padrão, o gerenciador de layout organiza automaticamente os itens em uma grade CSS. Mas há casos em que você vai querer que um item tenha como uma posição específica, digamos que este card o Lannister House sempre venha como o primeiro item em nossa grade CSS. Para conseguir isso, adicionarei outra classe aqui chamada main. Esta classe principal será definida no item que queremos vir primeiro. Para especificar a posição de um item específico, podemos usar a coluna de grade que direi este item, quero ser colocado na primeira coluna. Também podemos usar a linha de grade se quisermos especificar também a linha. Agora, se salvarmos, então dê uma olhada neste cartão. Quando atualizarmos, veremos que o cartão agora está colocado na primeira coluna e na primeira linha. Ainda mais, podemos usar essas duas, colunas da grade e a linha da grade, para fazer com que esse item se espalhe em várias vendas. Se quisermos, digamos que este seja maior para abranger, também nesta coluna e também nesta linha. O que vou dizer aqui, entrarei e adicionarei um segundo parâmetro, dizendo que, olha, quero começar da coluna um e abrangê-lo por duas colunas. Farei exatamente a mesma coisa com o cru. Vamos salvar, veremos que agora nosso cartão inicial está estendido por duas linhas e duas colunas. E também funcionará bem se redimensionarmos a janela. 9. Exemplo 2 - Introdução e descrição do projeto: Vamos ver o que queremos construir neste exemplo. Temos layout para a página inicial. O layout está indo em toda a altura da tela e é feito de cinco seções. Há esta seção de conteúdo principal que inicialmente está centrada e leva a maior parte do setor imobiliário da nossa tela. Juntamente com outras quatro seções secundárias, temos a esquerda 1, esquerda 2, direita 1 e direita 2. Se reduzirmos os tamanhos da nossa janela, esse layout mudará e passará de três colunas para um layout de duas colunas. Vamos ver agora o que temos nos arquivos iniciais para este exemplo. Temos dois arquivos, temos um HTML de índice e o estilo CSS. O HTML de índice contém apenas a marcação mínima necessária para que essa coisa seja executada. Temos uma div que é a lacuna geral do nosso exemplo e tem uma classe de contêiner. Dentro dele, existem cinco outras divs. Cada div tem uma classe como esquerda 1, direita 1, esquerda 2, direita 2. No meio, há essa div principal contendo a seção principal do nosso conteúdo. No estilo que CSS, elas são apenas algumas propriedades CSS básicas que estão dando essa camada apenas à cor de fundo para o geral selecionado algumas bordas para nossas células e a fonte família de sans serif. Este é o código que temos nestes arquivos iniciais. Agora vamos ver como passaremos de um layout simples como este para um conteúdo bem organizado como temos aqui. 10. Exemplo 2 - Como definir as áreas de modelo nomeado em uma grade em CSS: A tag do modelo de nome aqui está funcionando definindo nomes para as seções em nosso design e, depois disso, atribuindo elementos a esses nomes. Vamos ver como podemos emular esse design final. Se dermos uma olhada nisso, veremos que basicamente temos cinco seções. Temos dois direitos e esquerda, e uma seção principal. Se formos aqui e formos capazes dar uma olhada melhor em como a grade ficará, nossos nomes podem ser algo assim. Inicialmente, aqui, posso nomear este é o nome do modelo A, este é o nome do modelo B, C, D. A única coisa que é um pouco mais especial é esse nome central do modelo, que basicamente é feitas de duas células, ambas com o mesmo nome. Nesse caso, direi que é X. Com isso em mente, voltarei ao meu exemplo inicial, e aqui, primeiro teremos que entrar no “Container”, e definimos o fato de que esta é uma grade. Eu direi, “Display Grid”. O próximo passo será definir as áreas do modelo. Vou dizer, “Áreas de modelo de grade”, e vou adicionar uma linha de cada vez. Inicialmente dissemos que começaremos com a seção chamada A. Depois disso, teremos este X. Iremos se Seção B. Em seguida, teremos nossa segunda linha com o nome C, depois disso, X novamente, e finalmente D. Agora, se atualizarmos, o layout mudou um pouco, mas não é de todo o que queremos. Isso ocorre porque não atribuímos o fato de que esta é a Seção A, esta é a Seção B, esta é a Seção X e assim por diante. Para isso, usaremos a área da grade. Eu virei aqui, novamente dizer, esta é a área de grade chamada X, e depois disso, adicionarei quatro linhas. Eu direi aqui que L1 é a Seção A, R1 é Seção B, L2 é Seção C e, finalmente, R2 é a Seção D. Tenha em mente que todas essas classes já foram atribuídas aos componentes do nossa grade. Este é L1, isso é L2 e assim por diante. Agora, se “Salvar”, veremos que temos um layout que está começando a parecer semelhante ao que queremos ter no final. 11. Exemplo 2 - Como definir o tamanho de linhas e colunas: Se dermos uma olhada no exemplo final, veremos que existem algumas diferenças no que temos atualmente em nosso arquivo de trabalho. Uma diferença é o fato de que essas colunas, a esquerda e a direita, são maiores para o que temos aqui. As áreas do modelo de grade podem ser facilmente combinadas com qualquer outra propriedade CSS. Para corrigir essa largura das colunas, posso vir aqui e dizer colunas de modelo de grade. Vou dizer que, para a primeira coluna quero uma largura de 200 pixels. Para o próximo, quero ocupar todo o espaço disponível. Nesse caso, direi que quero um fr, e para o último, quero ter novamente 200 pixels. Se salvarmos, veremos que agora a largura de nossas colunas é exatamente a mesma. Outra diferença para o exemplo final é o fato de que este vai até a altura total. Pode-se ser tentado a dizer que, se aqui as coisas foram resolvidas com colunas de modelo de grade, posso vir e usar as linhas e posso dizer linhas de modelo de grade. Dado o fato de que temos duas linhas que têm que percorrer todo o caminho 50%, vou apenas dizer algo como, a primeira linha tem que estar em um fr e a segunda linha tem que estar novamente em um fr. Mas isso não muda nada em nosso layout. Se salvarmos, o resultado será exatamente o mesmo. Isso ocorre porque não expressamos o fato de que esse contêiner tem que ser informado de 100%. Podemos vir aqui e dizer que a altura do nosso contêiner é 100% da altura da janela de visualização. Se salvarmos, veremos que nosso layout agora está indo de cima para baixo. Como uma nota lateral, podemos até remover a propriedade linhas do modelo de grade. Porque, por padrão, nosso sistema de grade, analisaremos o fato de que ele tem duas linhas e, por padrão, atribuirá um fr a cada uma delas. Falando em nós podemos até remover todas essas declarações e as coisas parecerão exatamente as mesmas. Porque o modo como o layout da grade está funcionando é que, quando ele tem que colocar um novo elemento, digamos que este esquerdo, ele o colocará no primeiro espaço disponível. Depois disso, o próximo estará colocando o segundo espaço disponível e assim por diante. Mas, por enquanto, vamos manter tudo como está para todos esses óculos esquerdo e direito porque precisaremos que eles tenham uma cortical melhor quando implementarmos a parte de responsividade. 12. Exemplo 2 - Como centrar itens no grade CSS e usando o flexbox: As mudanças que fizemos na lição anterior, de fato, corrigiram o problema com os tamanhos das linhas e das colunas. Mas em nosso exemplo final, o conteúdo é centralizado dentro de uma célula. Você pode saber que isso pode ser muito fácil com algo como um display flex. De fato, a grade CSS pode ser combinada com qualquer outro tipo de exibição. Por exemplo, se eu for aqui dentro de uma div, e disser que isso tem um display flex. Depois disso, direi que o conteúdo justificativo é central e também os itens de alinhamento ainda são centrais. Nós economizamos. Agora podemos ver que nosso conteúdo está bem centrado na horizontal e na vertical, e isso foi feito com uma exibição de flex. A moral da história é que sempre podemos combinar a grade CSS com qualquer outro tipo de exibição. 13. Exemplo 2 - designs responsivos com grade de CSS: Uma coisa que eu realmente gosto na grade CSS é quanto controle ela nos permite ter quando estamos lidando com design responsivo. Digamos que nosso layout precise ser alterado para algo assim quando a tela estiver baixa em 800 pixels. Bem, é claro que para isso, precisaremos de algum tipo de consulta de mídia. Eu virei aqui sob o contêiner e aqui na consulta de mídia e direi que quando nossa tela estiver baixa em 800 pixels, para o contêiner, eu quero ter algumas alterações. Se olharmos no exemplo final, o que vemos aqui é que, a esquerda e a direita se moveram na linha superior depois disso, o conteúdo principal é a segunda linha e na última linha, temos a esquerda 2 e a direita 2 . Se dermos uma olhada nessa área de modelo de grade, isso está descrevendo como nosso layout está parecendo. Isso é bom porque o que posso fazer aqui na consulta de mídia é apenas substituir isso. Então, direi que nossa área de modelo de grade precisa ser algo assim. Inicialmente, na primeira linha, queremos ter a e b. Depois disso, na segunda linha, precisa ser preenchido com o x e, finalmente, na última linha terá c e d. Se salvarmos, veremos que algumas mudanças participaram, mas ainda assim, o layout não parece que queremos que ele pareça e isso é por causa dessas colunas de modelo que está dizendo ao layout que temos três colunas e elas tem que estar em tamanhos específicos. Mas o que podemos fazer facilmente em nossa consulta de mídia é apenas pegar essas colunas de modelo de grade e dizer que queremos auto [inaudível]. Isso exibirá o layout exatamente como pretendemos no exemplo final. Ainda mais, digamos, por exemplo, se quisermos mover esse conteúdo principal no topo, porque eu não sei que esta é a parte mais importante de todos os conteúdos, podemos facilmente conseguir isso apenas pegando isso, vá e coloque aqui. Depois disso, se eu salvar, veremos que agora temos o conteúdo principal bem apresentado no tópico da nossa página. Como eu disse, isso é uma coisa que eu realmente amo na grade CS. O fato de que depois de definirmos todos esses nomes, podemos alterar facilmente todo o layout. Acabamos de fazer uma amostra de consulta de mídia e a propriedade grid-template-areas. 14. Exemplo 2 - Deixe uma célula vazia e convenções de nomes: Antes de concluir este exercício, gostaria de passar por alguns pequenos detalhes com áreas de modelo de grade nomeadas. Primeiro de tudo, esses nomes podem ser as palavras que quisermos que sejam. Acabei de usar aqui apenas letras simples como a, b, c e assim por diante, apenas na ideia de ter uma maneira simples de digitá-las. Mas, por exemplo, se eu quiser mudar este para testar, as coisas acontecerão como antes. A única condição é usar o nome também na classe correspondente. Falando sobre esses nomes, os nomes diferenciam maiúsculas e minúsc Então, por exemplo, se aqui eu mudar de x para o caso X maiúsculo e vou salvar, veremos que agora nosso layout foi de cabeça para baixo. O mesmo acontece se eu digitar x entre aspas, como farei para strings em uma linguagem de programação. Um problema comum é o fato de que às vezes queremos em nosso layout que uma célula não tenha nenhum conteúdo dentro dela. Então, por exemplo, eu gostaria que este direito 1 fosse apenas uma célula vazia. Uma solução muito comum para isso é apenas substituir o nome b ou qualquer que seja o nome para essa célula com apenas um ponto simples. Mas outra coisa que eu teria a ver com isso também é remover o conteúdo real ou outra forma, as coisas vão quebrar. Uma coisa a menos, há casos em que não queremos que a altura do layout seja a mesma que a altura da nossa página. Nós só queremos, digamos que essas células tenham 150 pixels de altura. Então, o que vou fazer aqui é remover essa altura de 100 viewport altura. Depois disso dentro de uma célula, vou dizer que isso tem a altura de 150 pixels. Se salvarmos, agora podemos ficar confusos com o fato de que esse conteúdo principal não está indo na altura da Direita 1 e da Direita 2. Mesmo que aqui dissemos que temos x tanto na primeira linha quanto na segunda linha. Mas o que realmente está acontecendo é que essa altura de 100 pixels foi aplicada também ao conteúdo principal. Mas ainda assim nossa célula está indo de uma linha para outra.