Transcrições
1. Introdução: Eu me tornei um desenvolvedor web em 1996. Então eu meio que cresci com CSS. Sou Rachel Andrew. Eu sou desenvolvedor web, escritor e palestrante e moro em Bristol, no Reino Unido. CSS Grid é um método de layout bidimensional. Ele pode colocar as coisas em linhas e colunas ao mesmo tempo, e essa é a primeira vez que tivemos algo assim em CSS. Quando vi pela primeira vez a especificação que se tornou CSS Grid, eu sabia que isso era algo que precisávamos. Minha experiência me disse que
a menos que alguém fosse uma líder de torcida para isso, poderia desaparecer. Então eu decidi que eu seria aquela líder de torcida e eu
começaria a escrever e falar sobre algo que não
era realmente algo que alguém poderia usar ainda na esperança de deixar todas as pessoas empolgadas sobre isso como eu estava. Nesta classe, eu vou orientá-lo sobre como começar com CSS Grid e mostrar-lhe algumas das principais características da especificação por meio de um pequeno projeto. É um layout de bloco básico que me permite
mostrar algumas das características da grade dentro de um tipo realista de estrutura. Esta classe será valiosa para qualquer pessoa que trabalhe na web. Se você principalmente faz desenvolvimento de front-end e eu quero que você aprenda sobre CSS Grid, ou mesmo se você faz principalmente desenvolvimento back-end. Será útil se você já sabe um pouco sobre CSS. Você sabe como aplicar CSS a uma página e você entende coisas como seletores e assim por diante. Estou muito entusiasmada por teres entrado na turma. Então vamos começar.
2. Introduzindo o grid CSS: A principal maneira de fazer layout antes do CSS Grid era realmente usar floats. Agora, para flutuar qualquer elemento flutuante, ele irá mover-se para cima. Tenho certeza que você pode flutuar uma coisa e então você pode flutuar outra coisa ao lado dela, e você pode criar um sistema que se parece com uma grade. Para fazer isso, você precisa obter tudo uma largura. Cada um de seus itens, você dá uma largura e então você os flutua ao lado do outro, e então o que você acaba com parece uma grade. Não há nenhuma grade real na página, o que você tem lá é apenas um monte de itens todos empurrados para parecer uma grade. À medida que
seguimos em frente, então temos livros Flex que muitas pessoas aclamaram como uma ótima maneira de criar grades na Web, mas também não é um bom framework. Ele permite que você crie grades mais facilmente do que os flutuadores, mas você ainda está dando uma largura e empurrando-as ao redor. Então, isso é o que faríamos em fazer layout até termos CSS Grid. CSS Grid é um método de layout bidimensional para a web. Duas dimensões significa que podemos colocar as coisas em colunas, mas também em linhas ao mesmo tempo, e é a primeira vez que realmente tivemos algo assim para a web. CSS Grid agora está disponível em todos os navegadores modernos. Ele tem muito bom suporte para o navegador. Se você está aprendendo a ser um desenvolvedor web hoje ou mesmo se você está apenas começando um novo projeto hoje, realmente
há muitas razões para não usar o Grid. Então, isso é uma coisa para estar olhando para entender como usar, porque é muito como as coisas vão ser feitas no futuro. Então este ambiente é CodePen, é um site de compartilhamento de código, você pode assiná-lo para uma conta gratuita. A coisa boa sobre CodePen é que se você encontrar algo em que você gostaria de olhar e você gostaria de experimentar com, você pode criar seu próprio fork de código de cópia, e isso permite que você brinque e editá-lo e faça coisas para usar como ponto de partida para o seu próprio trabalho. Então, a maneira como vamos trabalhar é eu criei um ponto de partida. Para chegar a este exemplo, basta usar o link na parte inferior da tela e você
também encontrará esse URL na descrição cruzada. Então este é o site em que vamos trabalhar, mas eu removi todo o layout. Então nós temos alguns CSS aqui, mas nós não temos o CSS que cria layout. Agora, se rolarmos para baixo, você pode ver que temos todas as imagens e todo o conteúdo. Isso é colocado para fora no layout de bloco, que é coisas que não vão explodir o outro, que é a maneira padrão que as coisas vão colocar para fora em CSS se você não criar nenhum layout. Então, enquanto estamos no CodePen, podemos dar uma olhada em torno de como CodePen funciona. Agora, quando você vai para o exemplo pela primeira vez, você vai ver algo como isso, e se você clicar no botão Fork na parte superior, isso irá criar sua própria cópia. Então, agora, você pode trabalhar na cópia que você salvou em sua conta CodePen, para que você
possa voltar a ela mais tarde, e isso significa que você pode fazer alterações e acompanhar todas
as lições sem alterar o ponto de partida padrão real. Se as coisas ficarem confusas e você quiser tentar novamente ou tentar algo completamente diferente com o exemplo, você pode simplesmente criar outro Fork e começar tudo de novo. Mas veja os diferentes painéis aqui no topo. Este é o HTML do documento. Assim, você pode ver todo o HTML usado para marcar o conteúdo. Aqui está o poste no fundo e ali está a barra lateral. Em seguida, no fundo aqui, temos o CSS. É aqui que vamos passar a maior parte do nosso tempo nesta lição. Vamos passar pelo CSS e adicionar coisas
aos seletores que já temos aqui e fazer alterações nisso. Se você começar a editar o código do exemplo original, então CodePen irá essencialmente criar um Fork para você porque você não
pode alterar o código do exemplo de outra pessoa sem a palavra a dizer. Então, você não precisa se preocupar em nunca estragar o código de outra pessoa na CodePen. Você sempre vai criar sua própria versão do documento. Mas poderia ser muito útil se você apenas criar pessoas de suas próprias coisas, porque então você pode ter várias cópias enquanto você trabalha através das coisas e, em seguida,
reverter para a versão antiga se você quiser quando você tem um problema. O CodePen tenta salvar seu trabalho automaticamente. Na verdade, às vezes enquanto você está trabalhando, você pode ver uma pequena mensagem no topo dizendo que ele está salvando automaticamente ou pedindo que eu salve. Se você quiser se certificar de que salvou o ponto em que está, você sempre pode clicar no botão Salvar na parte superior, e isso garantirá que o trabalho que você está fazendo foi salvo. Se quando você chegar ao CodePen pela primeira vez, o painel JavaScript aqui está aberto. Nós não vamos escrever qualquer JavaScript hoje, você pode sempre tirar isso do caminho minimizando-o e ele vai embora. Da mesma forma, se quando você está realmente trabalhando em CSS, se você quiser criar um pouco mais de espaço, você pode até minimizar o painel HTML se você quiser, e apenas tirar isso do caminho se você estiver indo para obter uma pequena tela para trabalhar, de modo a maximizar o espaço que você tem para trabalhar. Claro, você pode obviamente arrastar esses painéis para criar um pouco mais de espaço para você. Eu vou mudar para o modo de apresentação no CodePen porque isso vai me permitir mostrar o texto e o CSS um pouco maior que será mais fácil para você dizer. Caso contrário, tudo funciona da mesma maneira. Então, antes de começarmos a aprender sobre o CSS, vou mostrar um pouco sobre nossos documentos e como as coisas funcionam. Então, no topo aqui, temos o HTML do documento. Agora, a maneira como o CodePen funciona é que você não inclui as tags de corpo, e aqui estão as partes de um documento HTML com as quais você pode estar familiarizado. Então nós realmente apenas começar com o que está dentro do corpo do documento. Então, temos aqui o nosso cabeçalho que inclui a nossa navegação. Você pode ver a navegação aqui. Então, por exemplo, temos artigos, e aqui estão os artigos no HTML. Então temos o título que é um H1, que é post de blog, e é aqui que começamos o documento principal. Então, nós temos uma imagem de wrapper classe, e isso tem notado menos a classe de destaque, e esse é o nosso recurso Dyson. Então, aqui estão eles. Estes serão o tipo de postagens de blog com uma imagem e um link para clicar. Então aqui, isso realmente marcado como uma lista, porque o que esta UL é, que é lista desordenada, e então temos itens de lista, itens sazonais. Você pode ver que temos imagens lá com a tag img. Então você pode continuar olhando através deles, e rolando para baixo, e aqui temos nosso artigo com uma classe de post, e esse é o artigo que está aqui em baixo. Então esse é o conteúdo principal do nosso design. O painel inferior aqui é o nosso CSS. Assim, você pode ver nossos seletores CSS, como HTML. Aqui estamos definindo uma fonte para todos os CSS vai ter a mesma fonte, Open Sans. Trabalhamos para baixo, temos muitas coisas no menu. Temos coisas como cores de fundo e assim por diante, coisas que fazem parte do layout, mas estão adicionando um pouco de estilo a esses documentos para que não tenhamos que escrever absolutamente tudo nessas lições. Então este é o nosso CSS e, principalmente, nós vamos estar trabalhando neste painel, fazendo alterações ou adicionando novos seletores e novas regras para nossos seletores lá. A razão pela qual eu escolhi uma postagem de blog é que eu pensei
que isso é uma coisa boa, que muitas pessoas têm um site pessoal e se você está apenas aprendendo a desenvolver para a web, criando um site pessoal como este, é um realmente boa maneira de realmente jogar ao redor e aprender novas habilidades. Na verdade, é sempre onde começo com algo novo. Vou começar no meu site pessoal, vou brincar com algo novo e ver como ele funciona antes talvez eu possa usá-lo em um site de produção para um cliente. Você pode se sentir livre para pegar isso e usá-lo apenas substituindo as imagens e fazendo algumas alterações se você quiser usar fora em seu próprio site, ou apenas usar pequenas partes dele como
um ponto de salto para coisas que você deseja adicionar em seu projetos próprios. Então, de volta à sua visão no CodePen, se você quiser pegar o trabalho que você fez e, em seguida, realmente aplicá-lo ao seu site, há um pequeno link de exportação aqui, e assim, você pode exportar isso como ele, e isso vai permitir você baixar todo o HTML e CSS, que ele possa ser carregado para um servidor em algum lugar. Eu costumo usar CodePen como uma maneira de fazer pequenos experimentos, que eu vou então tomar, eu realmente uso provavelmente em outro lugar. Então você sempre pode fazer isso, você sempre pode pegar um zíper do trabalho que você tem feito. Agora que você conhece um pouco sobre a CodePen e o ambiente em que
vamos trabalhar, vamos passar para a próxima lição em que vou mostrar a você como definir sua grade.
3. Como definir seu grid: Quando começarmos qualquer um desses exemplos, haverá um ul na tela, que é o ponto em que a demo está agora, então onde eu estou. Então, para este exemplo, estamos começando do início com o código que mostrei na última lição. Agora, se você quiser, você pode apenas usar este código e trabalhar direito através
de todas as lições usando este documento, ou se você quiser, você pode pegar com um novo exemplo, que é o meu ponto de partida para cada documento, e nós mostrar-lhe que ul na tela com cada lição. Nesta lição, vou mostrar a vocês como definir uma grade. Porque para começar a usar GridLayout, precisamos dizer ao navegador que queremos usar grade CSS. Então, vou mostrar-lhe como definir uma grade e usar colunas e linhas para configurar a grade com a qual você estará trabalhando na página. Então, vamos começar a criar uma grade nesta página. Temos duas grades diferentes na página. Haverá a grade que contém os itens em destaque no topo da página, e então haverá uma segunda grade para lidar com o layout do nosso artigo na parte inferior. Então, vamos começar. Então, a primeira coisa que eu quero fazer é trabalhar com esses itens em destaque. Então, se deslocarmos para baixo no CSS, você encontrará.featured. Agora, essa é a classe que forneceu para o ul aqui, nós temos classe ul destaque, que vai segmentar esses itens em destaque. Agora, no momento, o que eu fiz foi remover o estilo padrão que você tem em uma lista. Eu removi a bala, a margem e o enchimento. Eu também adicionei uma cor de fundo, e vamos ver por que assim que começamos a criar nossa grade. Então, para começar a usar grade, basta dizer ao navegador que queremos usar grade, e fazemos isso com grade de exibição. Isso significa que agora estamos usando GridLayout, embora nada tenha mudado no layout, porque o que realmente criamos agora é que criamos uma única grade de coluna, e isso não mudou realmente o layout. Então, para alterar o layout quando você começar a adicionar algumas linhas ou colunas. Se você vir o pop-up de salvamento automático no CodePen, isso significa que o CodePen começou a salvar seu documento para você enquanto você está trabalhando. Você sempre pode clicar em Salvar na parte superior se quiser se certificar de que seu trabalho está salvo. Então, agora vamos criar algumas colunas na grade. Agora, fazemos isso com uma propriedade chamada grid-template-columns. O valor que grad-template-columns leva é chamado de listagem de faixas. Então essa é uma lista de tamanhos de faixa. Agora, vou parar de fazer isso em pixels porque quero mostrar
a diferença entre as diferentes maneiras de dimensionar nossas colunas. Então, vamos criar algumas faixas, e vamos criá-las em 300 pixels. Como você vê agora, a CodePen atualizou nosso layout. Este é o bom, pense em usar CodePen. Não precisamos recarregar o navegador para salvar as alterações, ele faz isso por nós. Você pode ver que temos algo que parece um pouco com uma grade. O que temos, são quatro faixas cada turno 300 pixels, e vamos começar a colocar nosso conteúdo nessas faixas, e depois de termos quatro itens, aqui exibidos em uma linha, que apenas cria uma segunda linha e coloca este item na parte inferior dele. Então, com apenas duas linhas de CSS, podemos criar algo que se pareça com uma grade. Outra coisa que você gostaria de fazer aqui é adicionar uma lacuna. Eu tenho essa cor de fundo na área porque isso vai
significar que eu posso deixar isso brilhar através de ter uma lacuna. Então, se eu disser, Grid-PAP, neste caso, eu só vou fazer uma lacuna de um pixel. Então, parece que temos uma linha entre os nossos itens. No entanto, você pode usar qualquer unidade de comprimento aqui. Se você quisesse uma grande lacuna, você poderia dizer, use 10 pixels, e isso espaça os itens. Então, essa é a grande propriedade da lacuna. Neste caso, vamos colocá-lo para baixo para um pixel. Parece que cortamos a fronteira entre os itens. Como o CodePen atualiza automaticamente o layout para nós, você pode realmente ver como a grade está criando faixas de coluna, essencialmente à medida que digitamos. Então, para nossos propósitos, queremos ter essas quatro faixas. Mas você poderia obviamente ter tantas faixas quanto você quisesse em sua grade. À medida que avançamos, a CodePen só vai atualizar isso, e mudar o layout conforme você avança. Então, você tem uma grade em sua página, mas você pode realmente ver a grade, não
há nenhuma maneira no GridLayout de mostrar a si mesmo todas as bordas da grade. No entanto, eu estou trabalhando no Firefox aqui, e se você estiver indo para usar GridLayout, eu realmente recomendo baixar uma cópia do navegador Firefox, porque Firefox tem excelentes ferramentas de desenvolvedor que vai torná-lo muito mais fácil para você trabalhar com grade. Claro que você pode trabalhar com grade CSS, e não usar o Firefox. O Chrome tem algumas ferramentas de desenvolvedor mais simples para GridLayout, mas acho que é muito útil trabalhar com as ferramentas do Firefox quando estou usando grid. Você verá que diferentes navegadores
se concentraram em diferentes coisas para suas ferramentas de desenvolvedor. Então, o Chrome é realmente ótimo para verificar o desempenho de suas páginas, e eles criaram um monte de ferramentas de desempenho. O Firefox está concentrado no layout e nas ferramentas para designers. Então, ter vários navegadores, não é apenas útil para testes de navegador, ele pode realmente ser útil para o desenvolvimento também. Abriremos essas ferramentas de desenvolvedor ao longo do curso, porque é uma maneira muito útil para você ver o que está acontecendo no navegador enquanto trabalha com GridLayout. Então, podemos dar uma olhada neles. Eu cliquei direito em uma área da minha grade e eu vou dizer, Inspecione Element. Isso abre este painel na parte inferior do navegador. Agora, este é o painel de ferramentas de desenvolvedor do Firefox, e você pode ver aqui o html do documento, e do outro lado, temos CSS. Então, se formos para layout, então vamos para a seção de grade aqui, e este é o ul.featured, então essa é a nossa área em destaque. Se eu clicar nisso, o Firefox exibe as linhas da grade para nós. Então, isso é realmente útil porque podemos ver todas as diferentes partes de nossa grade e temos uma pequena representação de sua grade, ainda assim você pode passar o mouse sobre qualquer parte da grade. Então, vale a pena neste momento você passar por algumas
da terminologia que temos em GridLayout. Cada uma dessas áreas é uma célula de grade, e você pode pensar que é um pouco como uma célula de tabela realmente. É a menor área que você pode ter na grade entre as linhas. Então, temos Linhas de Grade, e as linhas são numeradas. Nós podemos realmente ativar no Firefox os números de linha. Então, você pode ver aqui como nossas linhas são conhecidas. Nós temos quatro faixas em nossa grade, e então começamos com a linha 1 à esquerda, e nós movemos através, então a linha 5, é a linha final. As faixas são qualquer área na grade ou qualquer linha de colunas. Uma linha individual ou uma coluna individual é chamada de faixa. Então, nós temos uma faixa de coluna aqui entre as linhas 1 e 2, e então nós temos uma trilha de linha aqui, entre essas linhas 1 e 2. Então, quando falo sobre faixas, é disso que estou falando. Estou falando de qualquer coluna ou linha individual na grade entre duas linhas. Então, vamos avançar para criar a outra grade em nossa página. Vou fechar estas ferramentas por enquanto. Então, a outra grade vai lidar com o layout do nosso artigo. Se rolarmos para baixo através do html, podemos ver que o artigo está dentro de ficar com uma classe de conteúdo. Então, é isso que vamos adicionar regras CSS. Agora, eu não tenho conteúdo na ferramenta CSS. Então, podemos adicionar isso a outro selecionado.content. Então, vamos criar uma grade, e apenas fazer um layout sobre isso. Então, primeiro, eu vou empurrá-lo para baixo um pouco com uma margem superior. Então, eu estou apenas adicionando uma margem superior para 40 pixels que iria mover isso um pouco para baixo. Então, novamente, vamos criar uma grade. Vou criar um pap de grade de novo. Desta vez vou usar porcentagens. Então, vamos criar uma lacuna de grade de cinco por cento. Então, para realmente ver qualquer coisa acontecer em nossa grade, nós novamente precisamos usar grid-template-columns, e nós vamos usar porcentagens. Então, eu vou criar uma faixa de coluna maior de 70 por cento,
e, em seguida, uma faixa de coluna menor de 25 por cento. Isso coloca nossa barra lateral ao lado do nosso conteúdo. É o mais longe que vamos chegar com isso nesta lição. Vamos dar uma olhada na próxima lição, sobre como podemos melhorar esse layout usando algumas coisas que fazem parte da grade. Antes de seguirmos em frente deste exemplo, vou apenas explicar algumas coisas sobre como as coisas estão sendo apresentadas neste momento. Então, no momento, o que temos é que temos de grades que estão definindo essas restrições externas desses layouts, mas ainda não começamos a mudar o que está acontecendo dentro das próprias Células de Grade. Então, as imagens que temos aqui são um conjunto de fotografias de balão, eu tirei, `Eu venho de Bristol, e temos uma grande festa de balão todos os anos, que me dá uma grande biblioteca de fotos de balão para usar. Mas você pode, obviamente, trocar suas próprias imagens, fazer upload de ativos no CodePen ou vincular a qualquer imagem existente na Web que você deseja usar para substituir essas imagens. Isso é apenas um link para uma imagem aqui. Se você estiver querendo fazer upload de ativos no CodePen, eu vou pular para essa exibição que é mais parecida com a exibição que você está vendo. Se você clicar em ativos, você obtém um painel de ativos que tem vários ativos de design que existem na verdade no CodePen que você pode optar por usar. Você também pode carregar o seu próprio, você pode arrastar e soltar arquivos, e então você tem um monte de arquivos que você pode escolher que você adicionou, o que torna mais fácil. Se você tem um monte de coisas que você deseja usar em exemplos, você pode simplesmente pegá-los e salvá-los aqui. Mas você também pode usar as coisas que a CodePen forneceu também. Agora é o fim do básico de definir uma grade. Podemos passar para a próxima lição, onde podemos realmente começar a
refinar esse layout, entendendo o tamanho da faixa.
4. Como dimensionar as faixas: Você pode começar esta lição usando o exemplo em que você estava trabalhando na última lição se você estiver seguindo estes até o outro, ou você pode usar o URL na tela para pegar exatamente onde eu estou agora. Na última lição, criamos uma grade usando um tipo familiar de unidades de comprimento, então pixels e porcentagens. Nesta lição, vamos refinar a grade e usar um método de
dimensionamento de faixas foi criado para o layout de grade que realmente torna as coisas muito mais fáceis. Então, se você olhar para o nosso layout que criamos agora, porque nós temos essas quatro faixas que são 300 pixels, nós meio que temos essa lacuna no final. Agora, se quisermos que você crie um layout que fosse para refletir, a maneira que faríamos isso na grade completa é você tende a usar porcentagens também se você usar na parte inferior aqui. Então, você pode ver que porque usamos percentagens, essas faixas crescem e encolhem. O problema com as porcentagens é que você tem que resolvê-los por si mesmo. Você tem que descobrir quantas necessidades de faixa
percentual e, em seguida, tipo de acima deles e, em seguida, certifique-se de que você não obter mais de 100 por cento. Se você obter mais de 100 por cento, você provavelmente terá uma barra de rolagem. Então, GridLayout introduziu um novo dimensionamento de faixa. Isso é usar algo chamado unidade FR, e é isso que vamos começar a dar uma olhada. A unidade FR é uma unidade flexível, define um comprimento flexível e lida com a distribuição de espaço no contêiner da grade. Na maioria dos casos, se você estiver usando GridLayout, e você está pensando que pode querer usar porcentagens, então a unidade FR lhe
dará resultados mais consistentes e economizará você ter que calcular tudo. Por exemplo, se você quiser adicionar uma faixa adicional, isso é fácil com a unidade FR. Com percentagens, você tem que recalcular tudo. Então, na maioria dos casos, eu escolheria usar a unidade FR. A única vez que eu recomendaria o uso de porcentagens é onde você está usando GridLayout juntamente com outros métodos de layout que precisam usar porcentagens. Por exemplo, você tem um layout de bootstrap flutuante e deseja colocar um componente GridLayout no meio dele, então
você pode optar por usar porcentagens para corresponder ao resto do layout. Mas a maioria, o resto do tempo, eu iria para a unidade de FR. Vai poupar muito tempo. Foi muito difícil em métodos de layout anteriores misturar coisas de tamanho fixo e coisas flexíveis quando estávamos usando porcentagens e isso é algo que a unidade FR faz muito bem para nós. Então, por exemplo, você pode ter um pequeno ícone que você sempre quer ter 50 pixels de largura, bem isso é bom porque você pode tornar o resto
do conteúdo um FR e ele irá absorver todo
o espaço disponível deixando a coisa de tamanho fixo sem causar uma barra de rolagem. Então, se primeiro dermos uma olhada em nossos itens em destaque aqui. Se encontrarmos aqueles no CSS e aqui está o nosso tamanho faixa de 300 pixels. Agora, eu vou mudar essas faixas para usar esta nova unidade, a unidade FR, e eu vou criar quatro faixas FR uma. Você pode ver o layout começar a mudar, modo que deve preencher a janela do navegador. A razão disso acontecer, é que a unidade FR distribui espaço disponível. Então, grade tomou todo o espaço disponível em nosso contêiner de grade, que se estende por toda a página. Porque temos quatro faixas, todas de um FR, é dado uma parte para cada uma das faixas. Se você esticar e encolher a janela do navegador, você pode ver como isso é agradável e responsivo, ele cresce e encolhe de acordo com o espaço disponível que temos. Se suas faixas forem dimensionadas em pixels
, elas são essencialmente fixas. Então, se terminarmos com muito pouco espaço, bem, ele só vai transbordar. Como você pode ver, isso é criar uma barra de rolagem e também está cutucando fora do layout que é o que aconteceria se você tem faixas fixas. Apenas este tipo de situação, que a unidade FR resolve, eles apenas nos permitem compartilhar os espaços disponíveis, seja uma grande quantidade de espaço ou uma pequena quantidade de espaço. Então, essa é a parte superior do layout, agora ele usa muito do espaço disponível e as faixas são agradáveis e flexíveis. Então, vamos dar uma olhada em nossa área percentual, então este é o conteúdo aqui embaixo, para
o qual usamos porcentagens. Agora, você pode mudar isso para usar unidades FR também. Então, eu vou mudar isso para três FR, um FR. Agora, o que isso faz, é que ele diz que tomar todo o espaço no recipiente e dar três partes do espaço para a primeira faixa, que é a nossa faixa que é maior, e uma parte para a segunda faixa. Então, você pode brincar com isso se você tivesse duas partes para a primeira faixa e uma parte para a segunda faixa. O que está acontecendo aqui é que todo o espaço está sendo dividido em três e duas partes nos dá a primeira faixa, e uma parte, a segunda faixa. Então, eu acho que três FR, um FR me dá o tipo de layout que eu quero. Então, a resposta vale a pena saber, aqui temos uma grande lacuna de cinco por cento, você pode deixar isso ou você pode decidir ter um intervalo de tamanho fixo. O que acontece aqui é que a grade olha para essa lacuna, e diz: “Bem, todo o nosso espaço está disponível, precisamos tirar 40 pixels porque isso é necessário para preencher a lacuna.” Então o que sobrou é distribuído de acordo com essas unidades FR. Você pode realmente misturar faixas de tamanho fixo e faixas FR. Então, se sempre quiséssemos que nossa barra lateral fosse de 300 pixels, poderíamos ter uma faixa FR e uma faixa de 300 pixels. Então, como temos menos espaço, você pode ver que a faixa de 300 pixels sempre permanece dentro dos pixels, e é o resto do espaço que é dado à outra faixa. Então, essas unidades FR são realmente úteis e nos ajudam a criar layouts que crescem e encolhem com o espaço que você tem disponível sem que você precise fazer as contas. Então, o que foi o caso quando você estava trabalhando com porcentagens. A unidade FR é absolutamente essencial para aproveitar a grade CSS. Nós não tínhamos a necessidade de dizer isso em métodos de layout
anteriores porque realmente não teria funcionado. Não tínhamos espaço para distribuir. Então, agora temos que para a grade, use-a e aproveite o poder que ela lhe dá. Agora você sabe sobre a unidade FR. Então, a próxima lição, nós vamos começar realmente colocando itens na grade, e aninhando uma grade dentro de outra.
5. Como aninhar grids e posicionar itens: Se você estiver acompanhando, você pode continuar com o exemplo em que você está trabalhando, ou você pode usar o URL na tela para encontrar um exemplo de exatamente onde eu estou agora. Na última lição, você aprendeu sobre o dimensionamento das faixas e começamos a tornar nossa grade flexível. Nesta lição, vamos começar a refinar o layout, e trabalhar em algumas das partes internas do layout,
aninhando grades e posicionando itens. Então, vamos agora dar uma olhada nos internos dessas caixas. Criamos uma grade na [inaudível] desta área, e a grade está colocando os itens dentro dela. Mas, parece que ainda não queremos. Gostaríamos de obter esta legenda sobrepondo a imagem, e também queremos obter as imagens, para que todas se alinhem e tenham o mesmo tamanho. É nisso que vamos trabalhar aqui. Então, o que nós vamos fazer é, nós estamos realmente indo para o ninho uma grade dentro de outra. Isto é algo que é absolutamente bom para fazer. Você pode ter quantas grades aninhadas dentro do outro quanto quiser. Agora, vamos criar layouts mais complexos. Então, nossa grade principal está em destaque, e assim nossa próxima grade será na li que está dentro destaque. Então, assim como antes, vamos usar a grade de exibição. Então, vamos começar a criar desta vez, algumas faixas de linha na grade. Fazemos isso com linhas de modelo de grade, que é exatamente como colunas de modelo de grade. Vou criar duas filas. Então, nós temos uma linha que é um fr, e então nós temos uma linha que é 5em. Você pode ver que algo está começando a acontecer sem grade que codificar painel começando a redimensionar as faixas. Se você não se deparou com a unidade em antes, esta é apenas mais uma unidade de comprimento em CSS. Corresponde ao tamanho do texto, o que é bastante útil. Porque significa que se aumentarmos nosso texto, a faixa real aumentará de tamanho. É um tamanho muito útil, e nós vamos estar brincando. Como você pode ver, esta faixa aqui está parecendo um pouco curta e cortada, mas estaremos brincando com a forma como criamos esse tamanho à medida que formos construindo este layout. Então, agora temos uma grade de trilha de duas linhas dentro de cada um desses itens. Então, vamos dar uma olhada no elemento bom inspecionar, porque essa é uma boa maneira de ver realmente como isso está funcionando. Então, você pode ver que é a nossa grade principal, que é a que está em destaque. Mas, você também tem essas grades individuais dentro dos itens. Então, podemos ligar um desses, e você pode ver nesse item, temos essa grade de duas faixas. Aqui está uma faixa, e aqui está a segunda linha. Então, é isso que vamos trabalhar com o que você está indo para
posicionar os itens usando essas linhas de grade. Então, vamos trabalhar com a imagem, que está aqui. Temos um div para a classe de imagem. O que queremos fazer é esticar isso sobre as duas fileiras. Então, vamos usar grid-row, e assim, começamos na linha um, e terminamos na linha três, e isso vai entrar em uma coluna de grade. Então, eu quero falar sobre isso um pouco rápido. Então, linha de grade é uma abreviação para grade-linha início e grad-linha final. Então, um é a linha um. Começamos na linha um, e terminamos na linha três. Se colocarmos o Firefox aqui, e
fizermos isso, começaremos na linha um, e terminaremos na linha três. Então, o que a grade fez, porque não posicionamos essa legenda, ela realmente
empurrou, criou uma nova linha na grade, e empurrou essa legenda para lá, que é o que acontecerá por padrão. grade não se sobrepõe a coisas, a menos que você peça. Ele sempre criará uma nova faixa e colocará o item nesta sobra. Você realmente tem que pedir à grade para fazer qualquer sobreposição, assim você não vai acabar com coisas empilhadas. Essa é praticamente a maneira com CSS. Tentamos não acumular seu conteúdo ou ocultar coisas por trás de outras coisas, a menos que você tenha solicitado isso. Agora, nós só precisamos dizer a linha inicial um para colunas, porque nós só queremos abranger uma faixa, e esse é o padrão. Pense abranger uma faixa por padrão. Então, se dissermos começar na coluna linha um, ele vai começar na coluna linha um, e ele vai terminar na coluna linha dois, então nós realmente não colocar a linha final explícita. Também queremos que a imagem cubra toda a área em vez de ter este espaço em branco por baixo. Agora, vamos usar, não parte da grade, esta é uma parte diferente do CSS, mas há uma maneira de fazer uma imagem esticar e cobrir toda uma área. Isso é usar uma propriedade chamada object fit. Então, se segmentarmos a imagem real em si, e eu vou dizer objeto encaixar, cobrir, e definir a largura e altura de 100 por cento, você pode ver agora que nossa imagem está dimensionada para cima e indo para a forma da caixa, e ele vai, então, basicamente, se cortar. Porque caso contrário, você acabaria com a imagem esticada fora do lugar, não
é o que você quer. Agora, continuamos a estilizar isto. Você vai ver como isso funciona. Então, nós definimos isso para a cobertura de ajuste de objeto. Então, agora podemos lidar com a legenda, que queríamos puxar para cima e ter sobrepondo nossa imagem. Então, se formos para a nossa legenda, e eu vou colocar isto na grelha dois. Você vê que a grade agora precisa ser colocada em outra faixa de coluna, porque ela não quer sobrepô-la. Então, se você quiser sobrepor, também
precisamos definir a coluna como um. Agora, temos nossa legenda colocada em cima da imagem, e eu usei essas cores RGBA aqui, e RGBA significa que podemos definir o canal alfa de todos os fundos. Eu defini para 0,6, o que o torna semi transparente, permite que as imagens lá brilhem através. Eu vou fazer uma última coisa para arrumar isso e nos dar imagens
e um bom tipo de fixo apertado que vai ajudar a mantê-los em proporção um ao outro. Então, se voltarmos para nossa grade original, então isso é destaque, que é a grade principal aqui, que tem os itens. Vou encontrar algumas fileiras. Por padrão, todas as linhas são dimensionadas automaticamente, e você pode pensar em tamanho automático, que
significa que as coisas crescerão para se ajustar ao conteúdo que está dentro delas. Você pode querer mudar isso, e então neste caso, eu vou definir algumas linhas, e eu vou fazê-las 250 pixels de altura. Que então, começa a nos dar o layout que queremos. Temos estas belas imagens arrumadas. Temos alturas de linhas definidas, e temos as legendas sobrepondo as próprias imagens. Só para terminar esta seção, quero mostrar a vocês outra pequena característica do layout de grade. Então, você pode ver nesta legenda, temos algum texto extra aqui, que está ficando muito perto do fundo. Porque nós definimos estes para ser 5em, que é um comprimento absoluto. Não vai ficar maior do que isso. Não é como a unidade fr, ou algo que responderia ao tamanho do texto. O que eu realmente gostaria é de ter algo que vai para de altura fixa. Mas se eu colocar mais texto, gostaria de expandir e lidar com esse texto. Porque, essa é a realidade de trabalhar na web, é que às vezes mais texto, veja. Podemos ver o que acontece se eu adicionar mais conteúdo. Não é ideal na web ter conteúdo com uma altura fixa em geral, porque não temos tendência para saber o tamanho do texto, ou em quanto texto vai acabar. Você pode planejar cuidadosamente seu design
e, em seguida, ele entra no sistema de gerenciamento de conteúdo
e, portanto, coloca em muito mais texto do que o esperado. Então, Grid nos dá uma maneira de lidar com isso. Para produzir um bom modelo linhas, você tem estes 5em valor. Agora, o que eu gostaria é que, para se tornar um mínimo, eu gostaria que essas faixas fossem pelo menos 5em de altura, mesmo que não tenhamos conteúdo suficiente. Por exemplo, esta segunda faixa aqui, que só tem uma linha. Mas eu gostaria, se eu receber muito texto lá, eu gostaria que ele se expandisse, e isso é exatamente o que a função minmax faz. Então, o que está acontecendo aqui é, quando você usa minmax para o tamanho da faixa, você pode passar em um minuto, um mínimo que no nosso caso é 5em, e então usar uma vírgula, e então você passa no máximo. Então, para o máximo aqui, eu estou usando auto, e auto significa realmente o tamanho do conteúdo neste contexto. Então, isso significa que se tivermos mais texto lá, a faixa crescerá. Se não houver texto suficiente, seria 5em. O que isso também destaca é que, nossa grade interna não tem nenhuma relação com a próxima grade interna. O que você pode fazer no momento você diz:
“Bem, eu gostaria que tudo alinhasse com o item mais alto, porque todas as grades aninhadas são independentes da grade externa.” Se você tornar a quantidade de espaço em uma faixa pequena, você pode ver que como essa legenda está ficando mais alta para lidar com o texto de quebra automática. Então, esta é uma pequena função que realmente reflete a forma como as coisas estão na web. O fato de que se você tem algo que tem uma certa quantidade de conteúdo, pode
haver mais conteúdo às vezes. Então, para encerrar esta seção, agora
definimos as caixas internas na seção de destaque, e fizemos isso aninhando uma grade dentro da grade que já tínhamos. Ao posicionar os itens, você começa a usar o posicionamento baseado em linha, sobre o
qual falaremos um pouco mais depois para posicionar os itens e puxar a legenda sobre a imagem que já colocamos. Então, em um vídeo, algumas propriedades CSS, você aprendeu muito sobre a grade CSS, e as diferentes coisas que você pode fazer com ele.
6. Como combinar o posicionamento manual e o automático: Você pode continuar acompanhando o exemplo em que você está trabalhando, ou você pode usar o URL na tela para pegar exatamente onde eu estou agora. Nesta lição, vamos começar a olhar um pouco mais sobre quando você pode querer usar o posicionamento automático
e a grade quando você pode querer posicionar seus itens e como você pode misturar os dois métodos de layout. Você pode ver a colocação automática acontecendo em nossa trava já. Então, quando definimos nossas grades nos itens em destaque, não
posicionamos cada um desses itens, eles apenas colocam um em cada célula da grade. Começamos a fazer alguma colocação quando colocamos para fora os itens internos desses itens. Porque na grade aninhada, definimos uma grade
e, em seguida, usamos posicionamento baseado em linha para colocar itens nessa grade para que possamos puxar essa legenda sobre a imagem abaixo. Então, analisamos como podemos querer realmente usar layout posicionado que você está colocando itens na grade quando apresentamos nosso conteúdo aqui. Então, você pode ver no momento que o conteúdo é empurrado para cima diretamente contra a borda da janela de exibição. Ele está correndo para as bordas e isso provavelmente não é algo que você gostaria. Então, talvez você gostaria de alterar esta lista de faixas. Então, vá para colunas de modelo e adicione um pouco de uma lacuna em ambos os lados. Então, talvez tenhamos apenas uma lacuna de 10 pixels, e você pode ver o que acontece. O posicionamento automático está tentando colocar todo o nosso conteúdo nessa pequena faixa, e está transbordando porque ele não se encaixa em uma faixa de 10 pixels e parece um pouco bagunçado. Isso obviamente não é algo que queremos. Então, vamos ter que posicionar o conteúdo que não acaba nessa faixa pequena. Eu também vou adicionar algumas linhas aqui. Porque uma vez que você começar a colocar seus itens, então você pode realmente querer começar a adicionar linhas em vez de apenas permitir linhas sejam criadas na grade para que você possa posicionar itens neles. Então, eu vou adicionar uma linha no topo, e então uma linha automática por baixo. Então, agora criamos um pouco mais de uma grade específica, e podemos começar a colocar nossos itens nela. Então, agora nós configuramos nossa grade e tornamos isso um pouco mais específico. Vamos posicionar o conteúdo nessa grade. O conteúdo está bem na parte inferior do nosso HTML e está dentro de um artigo na classe de post. Então, podemos segmentar post, e então vamos usar coluna de grade, e queremos começar após a linha de coluna dois. Então, isso evitará aquela pequena faixa magricela que criamos. Só precisávamos estender uma faixa, então podemos dizer a coluna 2 da grade. Na verdade, vou configurá-lo para abranger duas linhas, recriado para faixas de linha. Então, vamos tê-lo estendido da linha um para a linha três. Agora, porque nós posicionamos isso por linha e coluna, o que aconteceu com o posicionamento automático é que, grande reposição do item que você colocou, e então ele leva o próximo item que ele encontra, e as coisas estão onde está A primeira cela vazia? Bem, a primeira cela vazia neste caso está naquela pista pequena, onde não queremos que as coisas saiam, e é por isso que a barra lateral está indo e pulou naquela pista. Então, também precisamos posicionar a barra lateral. Então, isso tem uma classe de lado um. Estamos indo para um lado, quero ir atrás da grande coluna linha três. Eu realmente gostaria que ele aparecesse parte abaixo do conteúdo, que significa que podemos colocá-lo em uma grade linha dois, que então o move para baixo no conteúdo. É esse tipo de coisa que era realmente difícil de fazer sem layout de grade. Na verdade, criar espaço em branco acima dos itens foi muito, muito difícil, e isso só mostra uma daquelas pequenas coisas que você pode fazer com layout de
grade que costumava ser muito difícil e agora pode ser usado de maneiras mais criativas. Porque nós temos nossas quatro unidades definindo nossas faixas e dizer que esta linha agora cresce e encolhe muito bem com o espaço disponível. Então, a seção superior desta página, vamos usar ritmo automático. Queremos tantos itens quanto você tiver para entrar e se expor. No entanto, o que gostaríamos é, para tornar o primeiro item um grande recurso, então torná-lo maior e realmente abranger mais células da grade. Então, podemos fazer isso direcionando o primeiro item dessa lista. Então, esse é o primeiro filho dessa lista. Então, isso seria o enxame de balões e dirigíveis indo. O primeiro seletor filho selecionará baseando o primeiro filho do contêiner. Então, aqui estamos dizendo, eu quero o primeiro item da lista dentro de destaque que terá como nosso primeiro item aqui, e esse é o item que queremos esticar sobre mais células. Quero que este item comece na coluna linha um e na coluna linha três, e comece na linha um e no final da linha três. Isso iria apenas colocar que, fez que uma imagem grande,
e, em seguida, os outros itens continuam a usar colocação automática. Então, as grades vão primeiro colocar para fora todo nosso item e fazê-lo ocupar todas as células que ele precisa para ocupar, então ele vai simplesmente soltar os itens ao lado dele. Este é um bom exemplo de como você pode misturar colocação
automática de itens com itens de posicionamento. Se você tem algo que você deseja ter em um lugar específico de uma página, você pode posicioná-lo e, em seguida, basta deixar a grade colocar todos os outros itens para você. Então, você pode imaginar que se você está tentando destacar uma imagem específica ou uma grande seção de conteúdo, isso é algo que você pode fazer para criar esses blocos de halo na parte superior de uma página, onde você está destacando algo específico no o design, tornando-o abranger a maioria das faixas da grade. Você pode ver como, nós sempre temos quatro faixas na grade neste ponto. Então, se nós tornarmos nossas janelas menores, ele apenas ocupa tanto espaço quanto tem para essas duas faixas, e nós podemos torná-la maior. Então, é naturalmente flexível em toda a grade. Se temos menos espaço ou se temos mais espaço, porque estamos usando essas unidades FR, o espaço é apenas compartilhado em proporção. Assim, uma imagem grande sempre ocupa duas faixas da grade, mesmo que esses caminhões sejam menores ou maiores, tornando-a naturalmente flexível. Então, a quantidade muito pequena de CSS, não
escrevemos uma enorme quantidade de CSS. Você tem o básico aqui para o seu blog. Combinamos graus ao aninhá-los, usamos posicionamento e também usamos posicionamento automático. Nós aprendemos sobre diferentes maneiras de dimensionar faixas usando as unidades FR e também usando unidades de chumbo, e coisas que os movimentos minmax, você sabe como criar algo que começa em um tamanho fixo, mas cresce para contêm conteúdo. O que temos aqui realmente é o seu layout de desktop para o seu blog. Eu vou colocá-lo para fora. É flexível, ainda não é muito responsivo. E assim, na próxima lição, vamos dar uma olhada em como pegar esse layout e torná-lo realmente bem em tamanhos de tela muito pequenos.
7. Como incorporar a resposta: Você pode seguir junto com o exemplo em que temos trabalhado. Se você quiser começar com o ponto que eu estou agora, então use o URL que está na tela. Na última lição, abordamos a colocação de manu versus colocação automática, e mostramos como tínhamos esse layout flexível, mas ainda não era muito responsivo. Então, nesta lição, vamos analisar a criação um layout responsivo que nos ajudará a criar uma versão que funcionou
muito bem em telas pequenas. Um design responsivo responderá a qualquer dispositivo que você estiver usando. Na Web hoje, as pessoas estão usando telefones minúsculos com telas muito pequenas, eles estão usando tablets, eles estão usando computadores desktop com telas enormes. Então, criamos um design responsivo significa que ele funcionará igualmente bem em cada uma dessas telas em diferentes layouts, possamos alterar o layout para aproveitar o tamanho da tela que temos. Vou mostrar-lhe como tirar uma postagem de blog flexível e transformá-la em um design responsivo com um layout de tela pequena. O layout que criamos é flexível. Assim, como temos menos espaço ou mais espaço, a distribuição de espaços entre nossas faixas devido ao uso da unidade FR. No entanto, uma vez que chegamos a muito pequeno, torna-se um pouco difícil de ler. Você realmente não gostaria de ler algo assim em um telefone celular, não é o ideal. Então, agora vamos olhar para como fazer isso em um layout responsivo,
para criar layout diferente para esses dispositivos de tela pequena. Então, você pode fazer algumas coisas com layout de grade. Você pode redefinir sua grade, e você pode redefinir onde as coisas realmente
ficam nessa grade depois de fazer alterações nela. Então, vamos dar uma olhada. O que eu vou fazer é adicionar uma consulta de mídia. O que eu estou dizendo aqui é que eu vou usar uma minwidth então, quando as coisas chegar a uma largura mínima, um 50 em, é onde eu vou adicionar um ponto de interrupção. Agora, quando você estiver adicionando esses pontos de interrupção, não pense muito em determinados dispositivos, não pense bem, qual é o tamanho de um iPad? Ou qual é o tamanho de um telefone? Preocupe-se com quando seu projeto se quebra, se preocupe com quando as linhas se tornam muito curtas ou se tornam muito longas, e é aí que você deve adicionar esses pontos de interrupção. Então, não se preocupe muito com o tamanho dos dispositivos porque realmente existem tantos dispositivos diferentes. Não vale muito a pena se preocupar com isso. Basta pensar no seu design, quando ele se torna muito estreito ou muito largo. Neste caso, eu vou para 50 em, e este é o lugar onde porque estamos dizendo largura mínima, isso é o que nós realmente queremos um layout mais amplo,
um layout de desktop que é o que nós já
criamos, nós queremos que chutar . Então, estamos lidando com aquele painel em destaque no topo. O que eu vou fazer é pegar as colunas e
fileiras e colocá-las aqui embaixo. Agora, o que isso significa é que agora eu posso redefinir a grade acima para nossas telas menores. O que eu quero fazer para telas pequenas é que eu vou ter apenas duas faixas de coluna. Então, eu vou mover duas faixas de coluna, e eu vou mudar linhas de modelo de grade e eu vou usar uma propriedade diferente, uma que não vimos antes, e isso é linhas automáticas de grade. Nós vamos usar minmax aqui, e dizer, grade auto linhas 250 pixels, auto. Agora, o que as linhas automáticas de grade faz é quando
obtemos linhas em nossa grade que são criadas automaticamente para colocar conteúdo em, ele irá criá-los neste tamanho. Haverá um mínimo de 250 pixels de altura e um máximo de auto. Agora, nada mudou ainda, mas vamos diminuir, e você pode ver a mudança de layout. Uma vez que chegamos a esses 50 em, uma vez que chegamos abaixo de 50 em, vamos para o nosso menor layout de tela para este painel porque nós temos apenas duas faixas, grades coloca nosso grande item no topo, e os itens menores abaixo. Este é um layout um pouco mais agradável para nossos dispositivos menores, e então à medida que ficamos maiores, chegamos aos 50 ems, e voltamos ao layout original para o painel em destaque. Então, o que estamos fazendo aqui às vezes é chamado de primeiro layout imóvel que basicamente configura o que você tem para sua tela pequena, e então você redefine para as telas maiores. Então, temos duas colunas para uma tela pequena, e então dizemos quando chegamos a uma largura mínima de 50 em, então
teremos quatro colunas. Usando a propriedade de colunas de modelo de grade novamente, sobrescrevemos a instrução anterior uma vez que temos largura suficiente para ter quatro colunas, e é assim que CSS funciona. As coisas que vêm mais tarde na folha de estilo substituirão as coisas que vêm mais cedo. Então, você tem suas coisas móveis primeiro, e então você substitui-lo com sua consulta imediata e ir para um layout de coluna completo. Então, agora, estamos usando nosso layout de duas colunas e você pode ver isso porque nosso grande item que abrange duas faixas está abrangendo duas faixas no topo e os outros itens vêm abaixo. Quando chegamos a 50 em, você pode ver que eles pulam de volta para o nosso layout de desktop. Então, podemos fazer o mesmo tipo de coisa com a parte inferior do layout. À medida que vamos muito pequenos, acabamos com pouco espaço para a barra lateral se sentar aqui, e tudo fica um pouco estreito. Então, podemos fazer alterações novamente em como esse layout funciona. Então, mais uma vez, vamos adicionar nossa consulta de mídia. Vou usar o mesmo ponto de interrupção. Desta vez vamos fazer o mesmo tipo de coisa com conteúdo. Vou pegar minhas colunas e minhas linhas e colocá-las dentro da consulta de mídia, e então podemos redefinir a grade acima. Então, o que eu quero fazer essencialmente é apenas ter uma grande coluna central, e nós não precisamos nos preocupar com as linhas aqui, nós podemos apenas adicionar isso em. Então, o que eu também preciso fazer é pegar o posicionamento e pop up dentro das consultas de mídia também para que faça sentido uma vez que temos um layout mais amplo com as faixas que queremos. Então, agora você pode ver que as telas pequenas, isso voltou a tentar encher nosso conteúdo dentro daquela faixa magra. Então, o que precisamos fazer é fazer com nosso osso lateral ou conteúdo comece depois dessa trilha magra. Então, eles acabam com uma classe de post e o do lado um que representa o corpo principal real do nosso artigo e a barra lateral, agora ambos começam após a linha da coluna da grade dois. Então, essa é a linha depois de perguntar qualquer barra lateral lá. Você pode ver se nós rolamos para baixo, esta é a barra lateral. Você sempre pode colocar uma cor de fundo sobre isso ou fazer algo para diferenciá-lo se você quiser. Isso é realmente o que você tende a fazer com layouts móveis, você tem que empilhar as coisas em uma ordem útil, e é aí que a grade torna muito fácil. Então, se formos mais largos, uma vez que atingimos os 50 em, você vê a barra lateral aparece no lugar porque mais uma vez, nós substituímos as instruções para ser logo após a linha da coluna da grade dois e adicioná-lo em uma linha, e, em seguida, a linha da coluna da grade três para a barra lateral. Então, estamos configurando para celular e, em seguida, abaixo, dentro das consultas médias, configuramos para desktop. Então, agora criamos um layout responsivo simples. Então, você pode ver aqui
como, à medida que
diminuímos, agora temos um layout móvel agradável, e podemos rolar para baixo e tudo isso é perfeitamente legível. Então, à medida que nos
esticamos, voltamos para a exibição da área de trabalho. A coisa é que com grade realmente você precisa muito pouco CSS para conseguir isso, e nós acabamos de adicionar em um ponto de interrupção. Agora, em um design complexo, você pode querer adicionar vários pontos de interrupção. Você pode querer criar um layout que tira proveito de telas muito grandes, e adicioná-lo outro ponto de interrupção ou você pode querer criar digamos isso muito linear, muito pequenos telefones. Como você não precisa de um monte de CSS para fazer isso e não é muito difícil de fazer, é muito mais fácil realmente adaptar seu design para todos os diferentes tipos de dispositivos que estão lá fora. Então, estamos praticamente feitos com o uso de grade para layout de nossa página, e você pode ver como, a partir de algumas linhas de código, tivemos que ir de algo que acabamos
de ter todo o nosso conteúdo definido uma coisa abaixo da outra para um layout que você poderia colocar on-line para uma postagem de blog, e também tornamos isso responsivo. Então, você tem um layout que funciona para diferentes dispositivos. Então, vamos seguir em frente na próxima lição apenas para pensar um pouco sobre como a grade funciona ao lado de outros métodos de layout.
8. Como combinar os layouts: Queremos a parte final do nosso layout e você pode acompanhar a camada que você tem construído até agora, ou você pode usar o URL na tela agora para pegar exatamente onde eu estou. Nesta lição final, vou falar sobre um lugar onde você pode não querer usar o Grid e como podemos usar o Flexbox para dar estilo na navegação. Minha navegação, eu gostaria de colocar em uma linha, que o torna um bom candidato para um layout Flexbox. Então, vamos dar uma olhada. Então, no HTML, podemos ver a navegação em uma lista ordenada, como temos Artigos, Eventos, Recursos e Fale comigo. Adicionando o CSS. Essa é a lista desordenada aqui, a que está dentro do cabeçalho. Uma vez agai, n Eu tirei a margem e preenchimento e o estilo da lista que você obteria por padrão em uma lista. Agora, para transformar isso em um layout Flex, tudo o que eu preciso fazer, é dizer, “exibir: flex”. Imediatamente, todos eles pulam em uma linha e isso é porque a exibição padrão para Flexbox, valor da caixa de
listagem é ter direção flexível de linhas, modo que as coisas tudo alinhado em uma linha. Isso é tudo o que precisamos fazer. Em comparação, se você transformasse isso em um layout de grade, você teria que começar a tomar muito mais decisões sobre o layout. Então, nós dizíamos “display: Grid” então, bem, nada aconteceria, e teríamos que pensar em configurar nossas colunas. Então talvez pudéssemos ter quatro colunas. Agora, isso poderia funcionar bem se você soubesse que você sempre tem quatro itens em sua navegação. Você queria que eles fossem espaçados uniformemente ou talvez que você pudesse ter uma navegação multinível. Você tem duas fileiras de conteúdo. Bem, nesse caso, usar o Grid seria uma boa escolha. Mas no nosso caso, só
queremos que esses itens se alinhem um ao lado do outro. Então, é muito mais simples apenas dizer, “display: flex” e isso me dá o layout que eu realmente quero. Então, você escolheria Flexbox se quiser apenas colocar as coisas em uma dimensão, modo que seja como uma linha ou como uma coluna. Neste caso, queríamos eles como uma linha, e assim Flexbox é uma boa escolha. Com o nosso post em destaque item, isso é bidimensional porque queremos colocar as coisas em linhas e em colunas. Queremos que eles se alinhem em suas colunas, bem como em suas linhas. É um layout bidimensional. Então, foi por isso que escolhi o Grid. Então, essa é a razão pela qual você escolheria um ou outro. Com o Grid, você começa a definir toda a grade no pai e, em seguida, os itens apenas se encaixam nele, que é uma boa maneira de trabalhar. Então, essa é realmente outra maneira de escolher Grade, é quando você quer fazer esse tipo de grande configuração, formar os elementos pai
e, em seguida, apenas deixar as coisas cair dentro com o posicionamento automático. Flexbox é muito apenas sobre pegar um monte de coisas e espalhá-las para fora. Então, isso é realmente todos os passos que você precisa para criar uma página de listagem de blog. Não tenha medo de usar isso como ponto de partida e seja
criativo , faça alterações e veja como o Grid se comporta. A melhor maneira de aprender CSS é jogar com CSS, absolutamente. Lembre-se, se você fez muitas alterações e deseja
exportá-lo e usar em seu próprio site, em sua visualização
no CodePen, você tem este pequeno botão de exportação. Se você clicar nisso, você pode exportar um zip e isso lhe dará tudo. Ele lhe dará o CSS e o HTML. Então, você pode usá-lo em outro lugar ou abri-lo em um editor de código em sua área de trabalho e brincar com ele lá. Então, espero que isso tenha sido muito útil para aprender a criar uma postagem de blog. Você aprendeu muito sobre CSS Grid ao longo do caminho.
9. Considerações finais: Então, nesta classe, você passou de não saber nada sobre grade CSS para ser capaz usar várias das propriedades da grade CSS para layout página da Web natural. Você poderia usar isso em uma página da Web real em produção agora. Você aprendeu a definir uma grade, como configurar colunas e trilhos de estrada e usar a unidade FO e coisas como minmax, para que você possa especificar um tamanho mínimo e um tamanho máximo. Analisamos grades de aninhamento e também criando um design responsivo simples. Também vimos por que você pode querer usar a grade sobre outros métodos de layout. Então, você realmente está pronto para começar a usar essas coisas no mundo real. Eu adoraria ver o seu blog listando páginas ou qualquer outra coisa que você faz é o salto fora deste projeto. Então, por favor, envie para a galeria do projeto, para que todos possamos dar uma olhada. Espero que gostemos desta aula. Há tantas direções diferentes que você pode tomar essas coisas, seja de uma forma criativa, ou apenas em uma simplificação da maneira que você cria coisas que você já precisa fazer. Estou ansioso para ver o que você faz com ele.
10. Explore mais cursos na Skillshare:
Rachel Andrew, Web Developer, Speaker and Author
