Introdução ao CSS Grid: crie seu próprio portfólio online

1. Introdução ao curso: Oi, meu nome é Luke Faddish, eu tenho sido um desenvolvedor de software profissional por quase 20 anos agora. Mas hoje, estou super animado para começar nossa aula. Nesta classe, vamos aprender como podemos usar CSS grid para construir um portfólio web on-line. Se você não estiver familiarizado com ele, ganância CSS é o novo padrão CSS para colocar páginas web complexas. Anteriormente, para fazer isso, tínhamos que usar grandes frameworks como bootstrap e foundation, ou um monte de hacks CSS que eram exibidos de forma diferente em cada navegador e esse é o problema que CSS grid resolve para nós. Durante esta aula, irá implementar este portfólio web on-line que parece e funciona muito bem em desktop e dispositivos móveis. Eu também coloquei um monte de recursos na área do projeto para tornar super fácil para iniciar seu projeto. Estarei com vocês a cada passo durante esta aula, então se você tiver algum problema ou precisar de ajuda, não hesite em me informar na área de discussão da comunidade desta turma. Caso contrário, estou ansioso para ver o que você constrói com grade CSS. 2. Para quem é este curso: Para quem é essa aula? Esta classe é para qualquer pessoa que queira aprender a criar um layout da web usando linhas e colunas. Isto é o que CSS nos dá. É uma classe de nível intermediário. Estou assumindo que você já conhece um pouco de HTML, CSS, e que você pode usar um editor de texto. Se não for esse o caso, não se preocupe, porque estamos aqui em troca de habilidades. Você pode encontrar aulas sobre todas essas coisas com uma pesquisa muito rápida. Vá embora e faça isso se precisar e depois volte para a aula. Caso contrário, sente-se firme para a próxima lição, onde vamos analisar detalhadamente o que vamos aprender durante esta aula. 3. O que vamos abordar neste curso: Bem-vindo de volta à nossa lição de grade CSS. Esta vai ser uma visão geral muito rápida sobre o que você vai aprender nesta aula. A primeira coisa que precisamos fazer é falar sobre o que CSS grid e para aprender sobre isso, precisamos saber o que é um sistema de layout em CSS. Vamos falar sobre o que é isso. Vamos falar sobre outros sistemas de layout CSS. Vamos ver como grade CSS é diferente e, finalmente, onde podemos usá-lo. Então vamos entrar em como podemos definir colunas de grade CSS, teremos que usar grade de exibição. Vamos descobrir como criar colunas usando colunas de modelo de grade que é uma regra de estilo CSS. Então vamos descobrir o que é a unidade fr quando estamos medindo colunas. Então vamos trabalhar em um exemplo muito simples que demonstra o uso das regras de estilo CSS. Depois disso, vamos criar um layout mais abrangente e completo. É aqui que vamos começar o nosso projeto de classe, que é o portfólio. Aprenderemos como podemos pintar uma grade usando áreas de modelo de grade. Vamos ver sobre a área da grade, crianças, e vamos trabalhar no nosso projeto principal. Como eu disse, o portfólio também vamos gastar um pouco de tempo falando sobre como podemos posicionar o conteúdo dentro das colunas. Para isso, vamos usar a regra de auto-CSS justify e também alinhar-self. Então, finalmente, vamos trabalhar em criar algum espaço na grade, usando a lacuna da grade. A última coisa que realmente precisamos falar é como podemos tornar nosso layout de grade responsivo. Como fazer com que pareça agradável em navegadores de desktop e em navegadores de celular e telefone também. Vamos tornar o nosso layout responsivo e usaremos @ media queries para definir layouts diferentes. Sente-se firme para o próximo vídeo, onde vamos falar sobre o que grade CSS realmente é. 4. Então, o é o de o de CSS: Olá a todos, bem-vindos de volta à nossa introdução à grade CSS. Neste vídeo, vamos falar sobre o que é realmente grade. Antes de falar sobre isso, nós realmente precisamos falar sobre o que são o sistema de layout é porque isso diz grade é um novo sistema de layout. Sistema de layout é um conjunto de regras que os navegadores da web usam para organizar elementos em uma página previsivelmente. Parece um pequeno poema. O ponto aqui é que os navegadores usam esse conjunto padrão de regras para organizar nossos elementos, que é dizer como H1s, divs e vãos, e coisas assim de uma forma previsível. As páginas da web olhar mais ou menos o mesmo em diferentes navegadores e definir o layout CSS padrão é tratar tudo como uma caixa. As coisas estão empilhadas umas em cima das outras ou próximas umas das outras. Se temos uma página web, este gradiente é como a página web aqui. Poderíamos ter como um grande div largo que vai através como um cabeçalho. Nossa seção principal seria empilhada por baixo disso, nós não estamos realmente empilhando um em cima do outro, o empilhamento por baixo, mas você entendeu a idéia. Então lá dentro temos coisas que estão próximas ou em cima umas das outras. Isso era ótimo quando sites pareciam assim. Mas desde então, temos invadido o sistema de layout padrão para que possamos fazer páginas da web se parecerem mais com isso. Se, apesar de não quisermos que nossas páginas da web pareçam um jornal, ainda queremos que as coisas sejam organizadas em linhas e colunas. Você pode ver aqui que eu coloquei algumas linhas para mostrar o que estamos falando aqui. O que a grade CSS pode fazer por nós é definir linhas. Agora uma fileira seria esta seção onde temos notícias, a grande manchete lá e, em seguida, abaixo que temos outra linha que contém todo o conteúdo de notícias. Então podemos definir colunas. Você pode ver que o conteúdo de notícias como aquela segunda fila lá, com coisas dentro dele. Você pode definir colunas para colocar as coisas. Podemos organizar as coisas dentro dessas colunas. Agora, este é o lugar onde como o sistema de layout de caixa CSS padrão volta ao jogo. As coisas serão organizadas lá da maneira usual. É só que nós seccionamos algumas partes da página para que eles sejam tratados um pouco diferente. Esse é o sistema de layout de grade CSS. No entanto, ele nos dá a opção de organizar as coisas dentro dessas colunas um pouco diferente também. Podemos usá-los diferentes regras de estilo para centrá-los horizontalmente ou verticalmente, o que sempre foi um grande desafio CSS. Também podemos criar calhas. Agora, calhas são esses espaços entre linhas e colunas que dão à nossa página um pouco de espaço para respirar o espaço coisas um pouco não faz com que pareça muito lotado. Existe uma pegadinha para usar a grade CSS agora, já que ele faz todas essas coisas incríveis para nós? Esta é a captura aqui no momento da gravação deste vídeo 75,34 por cento da Internet está usando um navegador que suporta grade CSS. Agora, isso não é um grande problema porque esse número está aumentando o tempo todo e aumentou muito rapidamente. No entanto, você precisa saber que se você está usando CSS grid em um site ou cerca de três quartos da internet, vai ser capaz de usá-lo da maneira que você pretende que ele seja usado. Mas como eu disse, esse número está aumentando o tempo todo. Eu acho que CSS grid é algo que todos nós precisamos aprender para o futuro. 5. Como definir as colunas de grade de em CSS: Olá e bem-vindo de volta à nossa introdução à grade CSS, onde vamos construir nosso próprio portfólio on-line. Nesta lição, não vamos trabalhar em nosso portfólio. Vamos começar a definir alguns CSS em colunas de grade, e vamos usar outra pequena página de exemplo para fazer isso. O que vamos cobrir neste vídeo? Vamos ver como podemos definir colunas de grade CSS. Vamos descobrir o que é a unidade FR. Vamos organizar conteúdo dentro de uma coluna, e vamos fazer isso construindo esta página de exemplo engraçada aqui. Você pode ver onde os tilings e o conteúdo em toda a página. A primeira coisa que precisamos fazer é verificar o HTML que vamos usar para fazer isso. Agora não vamos editar este HTML. Só vamos trabalhar com o nosso CSS. No entanto, é uma ótima ideia estarmos familiarizados com a estrutura da página com a qual estamos trabalhando quando editamos nosso CSS. Todo o código com o qual estamos trabalhando hoje está disponível na seção de recursos do projeto e na coluna de grade CSS, example.zip. Você pode encontrar o HTML, o CSS e as imagens que estamos usando para esta pequena página para que você possa trabalhar junto com ele também. Mas primeiro, aqui está o nosso HTML. Aqui estamos em nosso código olhando para o HTML e você pode ver que temos uma página web HTML bastante típico. Estamos ligando para nossas colunas de grade CSS, .CSS aqui. Depois descemos para olhar o corpo da página web, que é a parte em que estamos interessados. Você pode ver que temos um ativo contendo com recipiente de classe e dentro que temos uma série de outros. Um deles tem um H1 nele, e então quatro têm imagens dentro deles: estrada 1, 2, 3 e 4. jpg. Então finalmente temos alguns créditos. É aqui que pegamos nossos pêssegos de estrada e isso é tudo o que há para o nosso HTML. Como eu disse, não vamos editar isso, mas precisamos saber que temos um contêiner com classe e dentro que <div> temos uma série de outros <div> que contêm nosso conteúdo. Em seguida, teremos uma pequena introdução ao nosso CSS. Aqui está o nosso CSS atual. Como você pode ver, é bem simples. Preparamos uma topografia para o corpo e redefinimos nossas margens para zero. Damos ao nosso H1 um tamanho de fonte grande e dissemos que todas as nossas imagens vão ocupar um 100 por cento do recipiente que estão dentro. Então aqui nós temos esses dois pequenos seletores CSS solitários, contêiner e, em seguida, está dentro do contêiner e é aqui que vamos colocar nosso código de grade CSS. Vamos voltar para a apresentação e ver o que vamos fazer para implementar nossa pequena página web. Primeiro, vamos dar uma olhada em como nossa página web parece agora sem nosso código de grade CSS e aqui está. Como pode ver, está muito podre. Temos estas imagens enormes e o nosso cabeçalho no topo e depois os nossos créditos no fundo. Isso não se parece com o exemplo que vimos na apresentação. Vamos começar a consertar isso agora mesmo. Nossa primeira regra de estilo de grade será a grade de exibição. Como você sabe, podemos definir nossa regra de exibição para bloquear ou bloco embutido ou embutido ou flexionar a grade CSS. Se vamos sobrepor coisas usando o sistema de layout de grade CSS, precisamos definir o valor de exibição ou a regra de exibição para grade. Isso vai no seletor para o elemento pai. Este é o elemento que contém tudo o resto que vai ser organizado dentro da grade. Vamos fazer isso agora mesmo. Aqui estamos de volta em nosso CSS e você pode ver que temos nossa classe contêiner. Lembre-se, este é o elemento que contém o resto do conteúdo da página da Web. A primeira coisa que vou fazer é dizer exibir, digitar uma grade. Isso também não vai ajudar muito a nossa página web , porque se eu der uma recarga e você vê que tudo o que conseguimos fazer é colocar nossos créditos no topo de nossas imagens e tudo o resto é colocado de forma bastante erotica. Podemos começar a corrigir isso aplicando nosso próximo estilo de grade CSS, que é a regra de estilo grid-template-columns. Esta é a regra que usamos para definir quantas colunas nossa grade terá e que tamanho elas são, e esperar por ela. Esta é uma das maneiras que podemos usar para descrever o tamanho dessas colunas. Estamos usando uma unidade curiosa chamada fr. Agora podemos facilmente usar um valor percentual, um valor M, um valor de pixel, praticamente qualquer outro tipo de unidade que você pode usar em CSS, você pode colocar aqui. No entanto, eu estou usando a unidade fr porque é bastante idiomática para grade CSS e também porque é uma coisa bastante interessante. O que fr significa é fração e quando temos 1fr 1fr 1fr, parece meio estranho, não temos nada para relacionar esse valor. Mas o que isso realmente significa é porque nós especificamos três valores aqui, que diz a grade CSS que queremos que ele seja cortado em basicamente três bits e porque cada valor um e um e um é igual, isso significa que cada um é vai ser equivalente a um terço da página. Agora, eu tenho que te dizer, eu lutei um pouco com essa idéia toda no início porque isso parece muito intuitivo. Eu quero três bits e eu quero que eles sejam de um tamanho igual, mas eu não estou acostumado a um computador pensando muito por mim. É tão intuitivo para mim que achei isso contra-intuitivo. Eu não sei o que você pensa sobre isso. No entanto, se tivéssemos dito 2fr 1fr 1fr, então ainda havia três medidas fornecidas, mas a primeira era duas e as outras eram uma; isso significaria que a primeira ocuparia 50% da página e os outros dois ocupariam 25 por cento cada. Agora vamos dar um pouco mais de uma olhada em como a unidade fr funciona para mais tarde na aula. No entanto, por enquanto, vamos dar uma olhada e ver como isso afeta o layout da nossa página web. Aqui estamos apoiando em nosso CSS e grad-template-colunas precisa ir no elemento pai, o elemento que irá conter ou manter tudo o resto que queremos ser organizados usando colunas de grade CSS. Podemos dizer 1fr 1fr 1fr, podemos salvar isso. Então podemos voltar para a nossa página web e recarregá-la e santa Molly, repente tudo está organizado. Você pode ver que nós especificamos que existem três colunas, mas se você lembrar em nosso HTML, nós temos como 1, 2, 3, 4, 5, 6 s aqui e porque nós especificamos mais elementos do que temos colunas, o que CSS grade tem feito para nós é envolvê-los através de uma nova linha. Isso é muito útil, certo? Temos cada uma dessas coisas ocupando um terço da tela e da grade CSS, porque nós especificamos três colunas dando seis coisas para exibir, ele faz envolvê-los em uma nova linha e ainda colocá-los para fora em colunas pares. Algo que eu deveria mencionar, você pode estar se perguntando, bem, e se eu tivesse umas 20 colunas, eu teria que escrever 1fr 20 vezes? Isso seria muito chato. Felizmente, temos na grade CSS essa coisa chamada repetição, que é esta pequena função CSS rápida que diz que queremos x número de coisas de um determinado tamanho. Neste caso, podemos dizer que teremos três 1frs e o resultado disso é que se eu recarregar que é exatamente o mesmo, podemos ver que nossas estradas manchete e nossos créditos estão presos no canto superior esquerdo de suas celas e gostaríamos de Conserte isso. Muito obrigado. Vamos ver o CSS que podemos usar no sistema de layout de grade CSS para corrigir isso. Este é realmente um tópico de organização de conteúdo dentro de uma coluna. Agora vamos usar a regra justificar-auto, centro e alinhamento self: centro. O que isso significa? Justificar-eu está falando sobre organizar as coisas horizontalmente. Podemos ter centro, direita, esquerda e assim por diante. Neste caso, estamos configurando para o centro, então queremos que as coisas fiquem no meio, horizontalmente. Então alinhar-self é tudo sobre alinhar as coisas verticalmente, para que possamos colocar as coisas no topo, ou no fundo ou qualquer lugar de uma célula. Neste caso, novamente, queremos que esteja no centro. Agora, aplicamos isso a algo que está dentro do contêiner da grade, não ao contêiner da grade em si. Verá o que quero dizer em um momento. Aqui estamos em nosso CSS novamente, e desta vez queremos aplicar as regras justificar-self e alinhar-self para <div> s que estão dentro do nosso contêiner. Lá vamos nós. Se voltarmos para nossa página e recarregarmos, você pode ver que nossa manchete de estradas e nossos créditos apareceram no meio das celas. Esta é uma introdução super rápida sobre como podemos usar regras de grade CSS para colocar conteúdo em uma página da web apenas usando colunas. Ainda não começamos a falar sobre o uso de linhas. Só uma breve recapitulação. fim de dizer ao navegador que estamos usando grade CSS, precisamos definir a regra de exibição de um elemento recipiente para grade. Podemos especificar quantas colunas queremos em nossa grade usando a regra grid-template-columns. Podemos especificar cada coluna individualmente, ou podemos usar esta função de repetição para especificar quantas colunas queremos. Para organizar o conteúdo dentro do nosso contêiner de grade CSS, podemos usar a regra justificar-auto e a regra de alinhamento auto. Justificar-auto é para organizar as coisas horizontalmente e alinhar-self é para organizá-las verticalmente. Agora aguente firme para a próxima lição onde começamos em nosso projeto de portfólio e vemos como podemos organizar as coisas com colunas e linhas na grade CSS. 6. Como criar um layout com linhas e colunas: Bem-vindo de volta a essa introdução à grade CSS onde construímos um portfólio on-line usando grade CSS. Aqui é onde nós definimos linhas e colunas e é também onde nós começamos nosso projeto. Então, o que vamos cobrir neste vídeo? Vamos aprender como definir um layout usando uma regra de grade CSS chamada áreas de gabarito de grade. Em seguida, vamos usar uma nova área de grade de regras para colocar elementos no layout. O que quer dizer para colocá-los dentro do layout que definimos com áreas de modelo de grade. Como eu disse, é aqui que vamos começar nossa pequena página do portfólio, e só para ver como isso se parece. Aqui temos ele bem aqui. Então esta é a nossa página de exemplo do portfólio. Temos uma imagem de estúdio de paisagem ou retratos e uma imagem comercial. Obviamente, você pode ter o que quiser dentro desta área de imagem. Você pode ter um pouco de apresentação de slides. Eu só tenho uma única imagem e cada um desses links para uma página HTML separada com exatamente a mesma estrutura. A única diferença é que cada um exibe uma imagem diferente. Teria sido muito melhor usar uma página HTML e talvez ter algum JavaScript ou algo para alternar entre nossas imagens. Mas por uma questão de ficar a aprender sobre CSS grid, eu mantive as coisas o mais simples possível aqui. Então é isso que vamos começar durante esta lição. Então, a primeira coisa que é melhor verificar é o HTML que define a estrutura da página. Aqui vamos nós. Aqui está a nossa página HTML paisagem. Como eu disse, o estúdio de retratos paisagísticos e as páginas comerciais são basicamente iguais. Eles só exibem uma imagem diferente e não há nada muito chocante aqui. Temos uma seção de cabeça HTML bastante padrão. Então entramos no corpo, nosso conteúdo está contido dentro de um elemento principal bem aqui em cima. Então vamos para o nosso H1. Então temos nossa navegação, que é nosso portfólio e navegação. Então este é um pequeno elemento nav com ID nav portfólio. Estas são identificações, vamos ver por que elas são importantes em breve. Depois disso, temos nosso item de portfólio que é a coisa que aparece dentro da página do portfólio, e estamos apenas vinculando a uma imagem. Novamente por brevidade eu codifiquei p1.jpg. Então um pouco de direitos autorais seu, você colocou seu nome lá. Finalmente, na parte inferior, temos alguma navegação do site que é outra peça de navegação com um navegador do site ID, e, em seguida, apenas alguns links que iria para fora para outras partes do site. Acabei de usar um “#” href aqui, ou uma libra. Novamente, porque esta é uma página web de exemplo. Mais uma vez, não vamos editar esse HTML durante esta classe porque estamos nos concentrando no CSS para grade CSS. Falando nisso, devemos verificar nosso CSS também e aqui está. Devo mencionar que mais uma vez, eu tenho o HTML, as imagens e CSS para esta página de portfólio em um arquivo zip chamado CSS grid portfolio, project.zip. Isso tem todo o HTML que você precisa, as imagens e o arquivo portfolio.CSS sem o CSS específico da grade CSS dentro dele. Isso é para você preencher como você faz o seu projeto. A maior parte do conteúdo existente aqui tem a ver com tipografia. Temos uma regra para nossas imagens, que é esticá-las novamente para o espaço disponível que elas têm quando são colocadas no layout. Então tudo o resto é basicamente apenas definir texto, estilos e tamanhos. Então, nada de grade relacionado lá. Então agora é hora de implementar nossa primeira regra de estilo de grade CSS. Assim como da última vez, vamos definir o nosso elemento contendo neste caso, é o elemento principal em nosso HTML. Vamos definir isso para ter uma regra de exibição igual à grade. Então, aqui estamos nós em nosso código que eu colocaria na grade de exibição principal. Antes de fazermos qualquer outra coisa, devemos ir e ver como a página web olha para o momento. Estamos apenas olhando para uma versão completa. Vamos ver como fica sem o nosso estilo de grade. Guarde isso e aqui vamos nós. Então é assim que parece no momento, não muito bonito embora mostrando a foto muito bem. Mas não é assim que queremos que pareça. Então eu vou colocar isso de volta lá, dar-lhe um salvamento, recarregar e olhar que não mudou muito. Mas vamos voltar a implementar o resto do layout da grade agora. A próxima coisa que queremos fazer, assim como da última vez vamos configurar algumas colunas e é um pouco diferente desta vez. Estamos usando nossa unidade fracionada da página para uma coluna e, em seguida, três deles e, em seguida, 0,1 deles. Eu não sei quanto a você, mas eu não acho que é super fácil somar tudo isso e pensar sobre como ele sai no layout real. Basicamente, o que eu fiz foi decidir que eu quero minhas colunas para ser e, em seguida, ajustá-los até que eles pareciam direito. Mas vamos colocar isso por enquanto e quando passarmos por este vídeo um pouco mais, seremos capazes de ver mais claramente como isso realmente se estabelece. Então, de volta em nosso código adicionar ou mais uma vez vai dizer colunas modelo de grade 1fr, 3fr, 0.1fr. Como isso faz com que a página pareça? Meio insano. É assim que parece. Mas se passarmos para a próxima parte deste vídeo, veremos como podemos reorganizar tudo isso para torná-lo layout da maneira que queremos. Então, este é o lugar onde nós realmente começa a descrever como queremos que a camada para olhar e a regra CSS que vamos usar é áreas de modelo de grade. Agora, essa é uma maneira de definir como o conteúdo fica dentro de linhas e colunas. Agora, há muitas maneiras diferentes de fazer isso na grade CSS. Eu pessoalmente acho esta a maneira mais intuitiva de pensar sobre isso, é por isso que eu fiz isso aqui e geralmente me ater a ele em meu próprio trabalho. Mas este é o valor que usamos que eu entendo que parece um monte de coisas bem ali. Mas se passarmos por cima, podemos ver que há três cordas aqui. Cada uma dessas cadeias representa uma linha. Então nós temos cabeçalho, cabeçalho, que é a primeira linha, e, em seguida, nav portfólio, item de portfólio, que é a segunda linha, e, em seguida, nav portfólio e site nav, que é a terceira linha. Então vamos ver como isso realmente parece. Se temos este grande retângulo cinzento aqui, finja que é a nossa página web. Se olharmos para as nossas colunas novamente, podemos ver que a nossa primeira coluna ocupa aproximadamente um pouco menos de um quarto do lado esquerdo. Então temos quase três quartos ocupados no meio. Então, na extrema direita, temos o 0.1fr. É uma pequena coluna ali, e é isso que estou usando como um pouco de dados daquele lado distante. É assim que nossas colunas se parecem, mas vamos ver como nosso conteúdo pode ser definido usando esse valor de áreas de modelo de grade. Mais uma vez, para referência, aqui está o valor e nós vamos apenas colocá-lo no canto inferior lá. Se você olhar para a primeira linha quando temos algo repetindo duas vezes ou mais de uma vez, isso significa que ele se estende por colunas ou linhas. Nós temos um cabeçalho aqui que está aparecendo na primeira linha, e isso significa que ele vai ocupar duas colunas. Então temos carteiras de navegação e, em seguida, portfolio-item. Podemos ver que nós dissemos, ok, carteiras de navegação vai ocupar a primeira coluna e, em seguida, portfolio-item vai tirar a segunda coluna. Então, quando chegarmos à terceira fila, temos carteiras de navegação novamente e podemos ver que ele está se estendendo através de fileiras. Então, finalmente, para preencher o último pedaço dessa linha e coluna, nós temos nosso site-nav. Agora, como eu disse, existem diferentes maneiras na grade CSS que podemos definir linhas e colunas e como os elementos se estendem através deles; como eles preenchem o espaço entre essas linhas e colunas. Como disse, considero esta a forma mais intuitiva e simples de as expressar e de as compreender. A próxima coisa que devemos fazer é colocar esse código em nosso CSS. Se você está jogando junto em casa com seu arquivo CSS de inicialização, por favor, coloque isso aqui também. Nós fazemos inline apenas para clareza, realmente. Portfolio-NAV seguido de portfolio-item e outra nova linha. Em seguida, portfolio-nav seguido seguido de site-nav. Isso é tudo bem e bom. Mas como é que colocamos as coisas lá dentro? Digamos, queremos que esta parte da página vá na primeira linha e abranja duas colunas e, em seguida, queremos que a próxima parte caba aqui, em seguida, a próxima parte dela ao lado disso. É assim que fazemos. Substitua elementos no layout usando esta regra CSS de área de grade. Esses valores se relacionam diretamente com os valores em nossas áreas de modelo de grade. Você vê que temos um cabeçalho aqui. Deixe-me ir até aqui e aqui está o cabeçalho mais uma vez e notar que ele não tem nenhuma aspas em torno dele, o que é bem diferente. É como se tivéssemos criado uma nova palavra reservada CSS, mas não criamos. Acabamos de dar um nome a uma seção do nosso layout que podemos usar mais tarde e vamos usá-lo usando grid-area. O que vamos fazer é definir alguns desses e todos eles se relacionam de volta aos valores em áreas de grade de template-areas. O que fazemos é entrar no nosso código onde estamos aqui. Então dizemos, queríamos H1 para ter um valor de área de grade de cabeçalho. Se você pode realmente ver aqui em cima muito claramente, que nós poupamos dizendo, nós queremos que o nosso H1 abranja duas colunas. Então, se você se lembra, em nosso HTML, temos esses diferentes elementos: nav com portfólio e ID de portfolio-nav e, em seguida, um div com um ID de portfolio-item e um ID de site-nav para este. Você pode ver que eles se relacionam de volta aos valores usados em áreas de grad-template-. Não temos que fazer isso. Acabei de dar o mesmo nome para clareza, e para nos ajudar a entender como eles se relacionam. Podemos dar-lhes qualquer nome que gostamos, e então podemos colocá-los juntos no CSS e o layout de grade CSS irá colocá-los no lugar apropriado. Vamos dizer elemento portfolio-nav, vamos dizer grade-área portfolio-nav e, em seguida, é claro, vamos dizer portfolio-item. Então, finalmente, nosso site-nav leva uma área de grade de site-nav. Agora podemos salvar isso e dar uma olhada em como ele funciona em nossa página web. Aqui está a nossa página web, como vimos pela última vez, um site bastante, lamentável. Se eu recarregar, você pode ver que está muito melhor. Ainda não chegou até lá, mas podemos ver que nossa página está muito mais próxima do que queremos. Além disso, podemos ver que ele foi definido de acordo com essa regra de CSS grid-template-areas. Temos o nosso portfólio. Você não pode realmente ver que ele está se espalhando por todo o caminho através daqui, mas é. Então temos nossa navegação de portfólio indo para o lado e, em seguida, nosso item de portfólio sobre o lado direito aqui. Então, finalmente, temos nossa navegação no site escondida por baixo dele. Você pode ver como usamos nossa regra CSS grid-template-areas para descrever um layout e, em seguida, como usamos a regra CSS de área de grade para colocar elementos individuais dentro dessa camada. Agora sente-se firme para o próximo vídeo onde vamos organizar o nosso conteúdo um pouco mais bem dentro do nosso layout. 7. Como posicionar o conteúdo no de colunas de grde em: Está bem. Bem-vindo de volta à nossa grade Introdução à CSS. Agora é hora de começar a posicionar alguns desses elementos em nosso layout porque podemos ver isso e coisas aqui que não estão muito corretas. Não queremos o nosso portfólio todo o caminho até aqui. Queremos isso para a direita, e a navegação aqui para as diferentes peças do portfólio deve ser feita no meio aqui, vez de enfiada no topo onde está agora. Isso é o que vamos consertar neste vídeo. O que vamos olhar? Algo que já cobrimos, que é a regra justificar-eu e as regras de auto-alinhamento. Nós também vamos criar algum espaço em nosso layout usando a regra de grade CSS gap grade. A primeira coisa que queremos fazer é empurrar nosso h1 todo o caminho para a direita, e vamos fazer isso com a auto-regra justifica definida para o valor, certo. Aqui estamos nós em nosso código e vamos apenas estourar isso agora, justificar-auto, certo? Guarde isso. Dê a essa página uma recarga, e podemos dizer que nosso cabeçalho do portfólio pulou todo o caminho para a direita ali. Em seguida, queremos corrigir nossa navegação de portfólio. Para o nosso portfólio nav ID para o nosso elemento, queremos dar-lhe o valor de auto-alinhamento do centro que é uma maneira de alinhá-lo verticalmente no meio. Aqui está o nosso portfólio Nav CSS, e podemos dizer alinhar-self, centro. Se dermos uma recarga à nossa página, lá vamos nós, colocamos a navegação do nosso portfólio no meio. Podemos dizer que nossa página está começando a olhar e trabalhar da maneira que queremos. Mas há mais uma coisa que queremos fazer, que é criar uma lacuna entre nossas linhas e colunas, e vamos dar a isso um valor de 1em. Isso também vai sobre o elemento principal, e este é o elemento pai para a nossa grade CSS. Esse é o elemento que contém a grade. É onde dizemos grade de exibição, e é onde atribuímos as áreas de modelo de grade. Fazemos isso aqui porque isso é algo que afeta o comportamento de todo o layout da grade. Vamos dizer grid gap 1em. Agora isso afeta linhas e colunas. Agora nós temos grid-linha gap e nós também temos grid-column-gap. Agora, essas regras podem ser usadas para especificar valores diferentes para as lacunas entre linhas e colunas. Mas porque eu quero o mesmo valor para a lacuna entre as linhas e colunas, eu posso usar espaço de grade como abreviação. Eu vou salvar isso e atualizar nosso navegador, e você pode ver que nós acabamos de colocar algum espaço entre tudo. Pode haver mais espaço entre nossa imagem e o portfólio, o cabeçalho e a navegação na parte inferior, e está chegando um pouco e creditar um pouco mais de espaço em nosso layout. Isso é praticamente tudo o que queremos fazer com esta página em sua forma atual. No entanto, se sairmos do nosso modo de tela cheia aqui, e eu pegar esse cara e começar a torná-lo um pouco menor, menor e menor, e menor, e menor, você pode ver que este não é realmente um layout compatível com dispositivos móveis. A próxima coisa que vamos fazer é atualizar nosso CSS para torná-lo responsivo ao tamanho do navegador, que ele mostre um layout apropriado para dispositivos móveis quando o navegador é pequeno como este. 8. Como fazer uma versão responsiva do projeto de a CSS Gde: Ok, bem-vindo de volta à Introdução ao CSS Grid. Neste vídeo, vamos ver como podemos tornar nosso layout de grade responsivo.O que quer dizer, como podemos fazer com que ele seja exibido muito bem em navegadores de desktop e móveis? O que vamos olhar agora? Vamos ver como podemos usar consultas de mídia CSS, e as áreas de modelo de grade CSS regra juntos para mostrar diferentes layouts em navegadores de tamanhos diferentes. Como vamos fazer isso? Bem, o que fazemos é redefinir nossas colunas de modelo de grade e áreas de modelo de grade, regras CSS para que basicamente tenhamos apenas uma coluna e, em seguida, definimos todas as nossas áreas diferentes, uma em cima da outra, que é muito perto da maneira normal que as coisas são dispostas de qualquer maneira. Mas esta é uma maneira que podemos usar nosso modelo de grade para reorganizar nossos itens quando o navegador é maior ou menor. Aqui estamos em nosso código e eu vou cutucar para a direita para baixo e criar uma media query.Vamos dizer 600 pixels. Esse pode ser o nosso ponto certo e agora o que eu vou fazer é configurar nosso CSS para padrão para um display móvel e, em seguida, quando nosso navegador tem um tamanho máximo maior que 600 pixels, então nós podemos ter um layout de desktop. Eu vou tirar desktop layout e eu vou pegar isso e colocar isso lá em baixo, queremos que seja no elemento principal. Isso é para desktop e basta colocar um pequeno comentário lá. You lembre.Fine e então vamos voltar para nossas colunas de modelo de grade e áreas de modelo de grade e dizer, bem, só queremos uma coluna agora graças assim e, em seguida, vamos dizer que temos o nosso cabeçalho. Então teremos nossa navegação de portfólio, então teremos nosso item de portfólio e, em seguida, teremos nosso site-nav na parte inferior. Vamos ver como isso fica em nosso navegador. Vou dar ao nosso navegador uma recarga e podemos ver que ainda estamos exibindo praticamente da maneira que esperaríamos para o nosso layout de desktop e, à medida que eu faço isso menor, você pode vê-lo muda e podemos ver que nosso portfólio está no topo. Temos nossos links de paisagem, retratos, estúdio e comerciais sentados lá.Então agora temos nosso site-nav no fundo. Eu acho que este texto é um pouco pequeno para um dispositivo móvel então eu vou corrigir isso agora. Eu vou mudar o nosso tamanho de fonte para duas unidades da largura de vista . Vamos colocar isso em nossa consulta de mídia, volta para um lá e eu acho que eu quero que o nosso cabeçalho seja centrado para um mobile.Eu acho que vamos dizer centro e então vamos aqui e nós vamos pop que lá dentro nosso desktop, nós ainda temos nosso um, dois, três columns.We tem um cabeçalho que abrange a primeira linha e nós temos nosso portfolio-nav e portfolio-item e o portfolio-nav abrangendo até o terceiro linha e, em seguida, nossa navegação no site, e então nós dissemos que nosso cabeçalho seria alinhado à direita e teremos um tamanho de fonte menor. Mas fora das definições da área de trabalho. Temos uma coluna, desculpe, e, em seguida, cada elemento sentado em sua própria linha e temos centrado everything.Vamos ver como isso parece em nosso navegador e agora eu vou recarregar isso e estamos feitos. Temos texto maior para o nosso layout móvel agora, mas temos tudo encaixando bem lá e não parece muito squashy.Claro que quando expandimos de volta para fora novamente, tudo volta à maneira que originalmente projetamos. É assim que podemos implementar uma página web portfólio usando grade CSS. 9. Como up nossa introdução para a grade de CSS: Bem, esse é o fim da nossa introdução à grade CSS. Eu realmente espero que você tenha gostado e achado útil também. Durante esta aula, aprendemos o que é CSS Grid, como podemos usá-lo para definir linhas e colunas em um layout da web, como podemos posicionar o conteúdo dentro de nossas linhas e colunas e, finalmente, como podemos tornar nosso layout ótimo em desktop e dispositivos móveis dispositivos. Agora, se você ainda não fez isso, agora seria um ótimo momento para postar seu projeto na galeria de projetos. Esta é uma ótima maneira de obter feedback e também para mostrar seu trabalho incrível para os outros alunos. Mais uma vez, eu realmente espero que você tenha achado esta aula útil e tenha gostado e estou ansioso para vê-lo na próxima vez.