Como aprender CSS GRID de uma vez por todas! 🤯

hoje você vai aprender uma das coisas no CSS que muita gente não sabe como utilizar que é o CSS Grid como criar layouts utilizando Grid como criar grids responsivas passo a passo aí a gente vai fazer na prática Então bora para mais um vídeo aqui no canal e hoje a gente vai falar sobre CSS Grid se você é novo por aqui se você não é inscrito aqui no canal se você gostar desse vídeo não precisa dar seu like nem nada agora não se você gostar desse vídeo se você aprender alguma coisa deixe seu gostei e

se inscreve aqui no canal se você não é inscrito Bora lá então pra gente poder começar aqui eu já Criei um novo projeto aqui usando HTML e CSS ó só pra gente partir do início aqui Criei um HTML mais básico possível tá link aqui com o nosso SSS e no CSS eu só resetei aqui então não temos nada tá então vou até usar aqui o Live server ó Live server pra gente abrir aqui do lado só para mim rodar então por enquanto não tem nada se eu colocar aqui um H1 dentro do nosso Body e

um teste e eu salvar já tem o teste aqui então bora começar pra gente começar aqui deixa eu tirar esse nosso H1 eu vou criar aqui uma Dive eu vou colocar Class name aqui para ela chamada container tá E dentro dela a gente vai colocar como se fosse os elementos que você quer alinhar nessa Grid aí então vou colocar aqui uma dívida também colocar aqui um Class name item e vou colocar um item traço um também e aí eu vou duplicar aqui mais algumas vezes ó item dois e tem três e tem quatro vou duplicar

aqui mais duas Olha tem cinco e tem seis e eles também tem essa classe e tem aqui então vou salvar e bora dar um estilo padrão só para a gente conseguir visualizar essas dívidas aqui na tela para aí sim a gente aplicar o Grid como que a gente consegue manipular o Grid para alinhar os elementos dentro então a gente vai aplicar o Grid aonde dentro do container e esse Grid vai alinhar os filhos dentro do container que são os itens né ou que você tivesse aqui dentro é dessa divisão dessa área aqui chamada container Então

bora lá vou lá no nosso CSS e a gente pode até dentro de cada dia que eu colocar e tem um e tem dois e tem três e colocar e tem aqui quatro cinco e seis então dentro de cada dívida Eu também coloquei esse nosso textinho né então vai aparecer ó aí tem um dois três quatro cinco seis só para ficar legal para poder visualizar e agora bora dar um espaçamento e uma cor pra gente conseguir entender esses caras aqui vou até diminuir um pouquinho aqui aumentar um pouquinho aqui pra gente poder visualizar e Bora

lá então dentro aqui ó ponto contém Ou seja é a viu que tá em volta de todo mundo é a área em volta de todo mundo para ela vou dar aqui uma border de dois Pixel Solid eu vou colocar aqui um blog tá então a gente vai ver ó que a área em volta desses nossos elementos dessas nossos itens aqui ó esse container essa área cara aqui ó esse cara aqui ó que tá azul tá vamos dar um espaçamento externo para ele também a gente pode vir aqui no nosso container a gente pode aplicar também

aqui uma margem por oito pixels em todos os lados então espaçamento externo ao nosso elemento container já deu um espaçamento de oito aqui dentro dele a gente tem um item um dois três quatro cinco e seis é esses itens que a gente quer alinhar com um Grid Então antes vamos dar um espaçamento também uma cor para os itens dentro ponto item eu vou dar aqui um background color colocar aqui Green só pra gente visualizar então cada comentem aqui tem uma cor de verde agora só que elas estão grudadas né e agora sim a gente pode

utilizar o Grid Então dentro do nosso container ou seja da área que está em volta que é o nosso container e eu vou ativar o nosso display Grid então salvei aqui por enquanto não mudou nada né eu vou dar um espaçamento também entre os itens aqui porque ó eles estão grudados né então dentro do container vou dar aqui um GAP ou seja um GAP é um espaçamento Entre esses caras de oito pixels aqui legal então agora a gente já consegue ver uma diferença entre eles né então a gente já tá utilizando nessa área azul ou

seja colocar até um border três Pixel aqui ó deixar mais grosso onde é o nosso container ele tá utilizando Flex Grid dentro dele que são os filhos a gente tem lá os itens né E eles então tem um espaçamento entre eles aí e tem uma cor verde cada item Ó tem esse background Verde aqui a gente consegue visualizar agora como é que a gente consegue manipular um alinhamento desses itens aqui pra gente fazer isso é muito simples Tá vou mudar aqui o GAP aqui para cima embaixo aqui do nosso Grid dentro do container Então é

ele que a gente passa a gente pode passar a propriedade chamada Grid template Collins e aqui a gente pode utilizar algumas coisas Qual que é o nosso template de coluna do nosso Grid então por exemplo olha eu quero que cada coluna tenha 80 Pixel 80 Pixel e 80 pixels então eu quero três colunas que tenham aí 80 Pixel então como eu coloquei três de 80 Pixel você pode ver que o nosso Grid ele se dividiu dentro do container os itens dentro cada um deles vai ter 80 Pixel então ó e tem um dois três e

quatro cada um se a gente até medir aqui ó vai ter o tal do 80 Pixel que é o que a gente colocou Então isso que é muito legal ah Mateus Eu Quero Só duas sem problema ele vai criar uma Grid ali de duas colunas e cada coluna tem 80 pixels poderia colocar mais também ah que era uma de vamos supor aqui sem Pixel 100 Pixel 100 Pixel e sem Pixel eu tô criando uma template aqui de quatro colunas cada uma tem 100 Pixel ali então ó se eu salvar uma duas três quatro quebrou pra

lembrar que a gente colocou quatro colunas e aí ele continua interando né até acabar o tanto de item que tem aqui dentro então a gente só tem seis itens então ele foi fazendo até quebrar para a linha de baixo Então essa é a forma mais simples e padrão para a gente entender como que a gente consegue manipular essa propriedade aqui mas bora evoluir mais vou deixar comentado aqui e a gente pode colocar agora ao invés de utilizar um valor fixo a gente pode utilizar uma fração Então vou colocar aqui novamente Grid template Colors tá vou

deixar comentários só para vocês terem aí tá então Grid templates e eu vou falar aqui olha cada um vai dividir em uma fração e uma fração e uma fração Então olha o que que vai acontecer né Isso é muito legal porque isso aqui é uma mágica que acontece com o nosso Grid Então agora eu tô falando que eu quero o quê três colunas né então eu passei ó uma coluna duas colunas e três colunas igual a gente estava fazendo em cima com o valor em Pixel só que agora a gente está usando essa fração então

ele vai fazer o quê Opa Mateus você falou aqui pra mim pra usar três colunas de uma fração o que que ele vai fazer olha só que bacana ele automaticamente pegou o tamanho do nosso container que é essa a nossa área linha azul e encaixou de forma igual cada um contendo uma fração então se eu falei três ó temos o nosso item uma fração e tem dois com uma fração e tem três com uma fração e eles fazem Então essas três colunas porque a gente passou três aqui tá E eles têm de forma automática então

eles vão se encaixar lá dentro um tamanho igual preenchendo esse nosso espaço do nosso container que essa área azul aqui que essa área onde está os item dentro né então preenche aqui ó na forma igual Então olha que legal olha que massa então sem que a gente tem que fazer nada agora se eu quisesse ter mais Ah eu quero Mateus eu quero ter apenas duas colunas aqui então posso passar por exemplo ó uma fração e uma fração se eu salvar isso aqui ó olha que legal já dividiu a nossa grife em dois caras ali ou

por exemplo eu quero que vou voltar para o nosso três aqui ó a gente pode ter tamanhos maiores vamos supor aqui que o nosso primeira coluna então onde está a primeira coluna aqui do nosso Grid Eu quero ter um tamanho maior eu quero ter ele duas vezes o tamanho é de uma fração como é que a gente pode aqui ó como é a nossa primeira coluna eu vou falar olha esse cara aqui vai ter dois FR então se eu salvar isso aqui agora olha só que bacana né eles automaticamente se recalculam ali eles vão falar

olha a primeira coluna do Grid tem dois FR E o restante tem um FR ou seja os que tem um FR tem que ter duas vezes para ter o tamanho da nossa primeira então você pode ver que o item 2 ó ele tem aqui o tamanho e se a gente olhar só vou copiar aqui ó basicamente o item uma tem que ter duas vezes o tamanho de um item dois ou de um item 3 por isso que a gente passou duas aqui tá se a gente colocasse três ó Opa três FR e eu salvar então

cada outra coluna que tem um FR tem que ter três vezes para ter uma dessa nossa coluna de 3 FL tá então isso é muito simples que a gente pode criar deixa eu colocar dois aqui novamente de forma dinâmica então sempre a nossa primeira coluna Grid vai ter duas vezes o tamanho das outras duas colunas aqui então isso é muito legal olha que bacana e a gente não precisa ficar preocupando mesmo que eu vá reduzindo sempre as outras colunas são menores e a primeira coluna tem duas vezes o tamanho da nossas outras colunas Então isso

é muito legal e se você quiser colocar mais colunas Ah quero colocar quatro colunas Vou colocar aqui por exemplo que a última coluna também vai ter dois FR por exemplo se eu salvar Olha que legal a nossa primeira tem o dois a do meio tem um a outra do Meio tem um também ó então dois um um pouquinho menor e a última coluna a gente falou que é dois FR também você pode ver que ela é maior então isso é muito legal ou a última coluna eu quero colocar por exemplo um FR também então agora

a gente tem quatro colunas aqui ó olha que bacana mas a gente pode evoluir ainda mais aqui com a nossa propriedade eu vou comentar aqui vou duplicar novamente ó vou comentar vou duplicar aqui vou comentar só para deixar para vocês no vídeo Tá e agora a gente vai conhecer outro cara muito legal do nosso Grid template Colors que é um mini Max então a gente pode passar aqui por exemplo eu quero criar aqui a primeira coluna Max então aqui e dentro eu posso passar Qual que é o mínimo o mínimo pode ser 0 por exemplo

e o máximo que essa coluna pode chegar vai ser um FR por exemplo tá E aí eu posso colocar segunda coluna em Max eu quero que o mínimo dessa segunda coluna seja 200 pixels por exemplo e o máximo dela seja um FR Tá o que que isso vai impactar Olha que bacana a gente consegue controlar quanto que ela vai reduzir e o quanto que ela vai aumentar Qual que é o máximo dela então eu falei ó deixa eu aumentar tudo aqui ó todas elas vão ter no máximo um FR ou seja todas elas vão se

dividir ali do tamanho igual que conseguir dentro do nosso container ali para encaixar essas duas colunas como eu coloquei duas ó uma e eu coloquei duas a segunda aqui então tem duas colunas agora se eu for reduzindo Olha a diferença vou reduzir ou reduzir reduzir até colocar mais aqui eu vou colocar que o nosso 200 aqui só pra gente poder ver efeito vai ser 400 tá vamos lá coloquei aqui que a nossa segunda coluna o mínimo dela que é o primeiro valor é 400 Pixel e o máximo é um FR Então se ela tiver no

máximo elas estão divid um tamanho igual Mas se a gente for reduzindo o tamanho da tela vamos supor que a gente está diminuindo aqui o nosso tamanho da tela a nossa coluna nosso Grid vai se ajustar de forma diferente porque porque a gente falou que a segunda coluna ela pode ter no mínimo 400 Pixel então você pode ver que quando a tô reduzindo aqui ó olha presta atenção nessa segunda coluna aqui ó Onde está o item 2 4 e 6 pode ver que ela não diminui porque ela ficou no mínimo 400 Pixel agora ó vou

diminuindo Aqui ó pode ver que a primeira coluna ela é de fato está reduzindo porque porque eu falei que a mínimo Max Ou seja a mínima largura do nosso A primeira coluna ela pode ser zero então eu posso reduzir e o que tiver dentro da nossa primeira coluna pode ó não tem o tamanho mínimo tá vendo ele vai ficar minúsculo aqui pode até ultrapassar se tiver mais espaço só que a nossa segunda aqui não a gente pode passar um valor então você quer para o mínimo e o valor que você quer para o máximo Então

isso é muito legal então tá no maior ele já se adaptam aí no valor máximo que é um FR Legal e quando eu diminui por exemplo eu posso controlar esses caras minha primeira coluna pode chegar no tamanho mínimo de 0 não tem problema por exemplo ou a segunda coluna que eu coloquei como exemplo aqui o mínimo pode ser 400 então não quero que essa segunda coluna diminua menos que 400 Pixel a gente pode controlar isso também usando esse mini Max aqui bora evoluir mais ainda e agora a gente vai conhecer ao invés do mini Max

aqui a gente pode utilizar um carinha muito legal que é o repeat tá então a gente pode utilizar esse cara que é o repito e aqui dentro eu posso repetir automaticamente e posso falar como que eu quero também o preenchimento por exemplo Ah eu quero que passam alto feiti vírgula mim Max novamente tá E aí o mínimo por exemplo Ah eu quero que seja cada coluna no mínimo de 200 Pixel e o máximo de um fe Então vou salvar isso aqui então Olha que bacana o que que vai acontecer que esse autofite aqui o Auto

Fit ele é automaticamente vai tentar encaixar no tamanho que tá na tela Então vou aumentar tudo aqui meu site por exemplo ó Então pode ver que ele tá pegando aqui áreas Onde está o conta ele tá o tamanho inteiro da minha tela então automaticamente ele foi encaixando ali sem eu saber qual que é o tanto de coluna que eu quero porque eu falei para ele ter um alto Fit então ele vai automaticamente Com base no espaço tentando encaixar as colunas ali então como eu aumentei e ó encaixaram elas aqui perfeito agora se elas forem reduzindo

eu falei que o mínimo é 200 pixels então por exemplo se eu reduzir uma coluna que não tem mínimo de 200 pixels aí ele vai falar Opa quebra para coluna de baixo e mantenha as que tem em cima encaixando Então olha que bacana se eu for reduzindo aqui ó reduzindo ó pode ver que quebrou uma pra linha de baixo porque porque essa daqui ó tava tentando chegar num valor mínimo de largura de menos de 200 Pixel daí agora a Grid falou não pode ir pra linha de baixo e a gente vai manter aqui que tem

que ser no mínimo 200 Pixel Beleza então ó posso ir reduzindo ó ele vai adaptando de forma automática Então isso é muito legal que a gente pode fazer também tá então isso é muito bacana e a gente pode também utilizar o repite para garantir a quantidade máxima de coluna que você tem por exemplo que você quer então por exemplo ó vou comentar aqui esse aqui para deixar aqui deixa eu colocar aqui embaixo então ao invés de usar aqui o autofit eu posso passar repeat Vamos colocar quatro por exemplo vírgula E aí o valor mínimo e

máximo que eu quero então se eu salvar aqui olha o que que vai acontecer agora agora a gente tá falando que ele vai ter quatro colunas que ele vai repetir que tem que ter no mínimo 200 Pixel e no máximo um FR Ou seja no máximo ele vai preencher o tamanho que ele conseguir legal encaixar elas mas tem que repetir quatro vezes o tanto de item que tiver aqui dentro então no nosso container ó tem um dois três quatro cinco e seis então ele tem que repetir quatro vezes então 34 colunas quebra para a linha

de baixo Então olha que legal a gente tem aqui agora você pode ver que conforme eu vou aumentando eles vão encaixando mas agora mesmo que o tamanho seja grande no máximo tem quatro colunas aqui ó quatro colunas não deu aí vai para baixo para ter mais quatro colunas e aí mais quatro colunas então a gente pode colocar isso também que fica bem legal só que tem que tomar cuidado com o tamanho que a gente colocou aqui como eu coloquei que o mínimo é Pixel coloquei um valor fixo se eu diminuir ó um valor menor que

isso eu vou diminuir ó diminuir menos que quando ó ele passa ele está extrapolando o item lá por quê Porque a gente passou esse mínimo de 200 pixels se eu tirasse colocasse zero aqui por exemplo e eu salvar aí ele vai sempre encaixar lá dentro porque aí ele pode ser zero por exemplo não tem é valor mínimo ali vamos se dizer pode espremer tudo aí aí depende do caso que você quer utilizar então se eu aumentar aqui ó ó lá fica em quatro e eu vou descendo descendo Olha que legal aí continua quatro só que

ele encaixou ele dentro sem quebrar para fora então a gente pode utilizar isso também e também além do nosso autofite ou até duplicar aqui de novo e vou comentar além do repito de eu passar a quantidade de colunas que eu quero eu posso utilizar um cara chamado alto fio muito legal também que ele vai automaticamente preenchendo o espaço então por exemplo vou salvar aqui deixa eu colocar um valor mínimo de 200 Pixel novamente eu salvar vamos lá vou aumentar aqui olha que bacana Olha a diferença aqui que a gente tem do alto fio aqui porque

ele vai preenchendo E aí Caso chegue no final ele quebra a planinho de baixo senão ele mantém assim então ó tá vendo aqui que tá grandão Então tá o item um dois três quatro e cinco e seis beleza faltou espaço ali que ele não cobriu Beleza agora se eu for reduzindo aqui ó olha que legal o reduzindo o reduzindo ó já quebrou para ele de baixo o reduzindo já quebrou para dentro de baixo ó Então já vai se encaixando ali então você pode utilizando também sem problema nenhum o auto fio para caso né o seu

layout você queira criar dessa forma o Grid para ele se adaptando Com base no tamanho mínimo que a gente colocou 200 então ele vai ocupar 200 e aí quebra para a linha de baixo caso não tenha mais espaço ele faz isso Ó é muito legal e a gente também pode usar aqui o Grid template Rose Então olha que bacana a gente tem aqui o nosso Grid template color não sei se vocês já dá colunas pra gente alinhar que as colunas Conforme eu quero legal maravilha mas eu vou deixar até reduzido aqui pra gente ter bastante

coluna tá E aí vamos supor que eu quero mexer nas linhas então Grid template Rose Então posso manipular também como é que vai ser o gerenciamento das minhas linhas aqui então por exemplo alto é o padrão né então a gente já tem ela se ajustando as linhas aqui de forma automática mas eu poderia colocar por exemplo alto e na segunda linha eu quero que tenha 200 pixels Olha que legal então Olha que bacana sempre Ó se tiver uma linha só não muda nada mas se tiver segunda linha então se tiver segunda linha vai ter 200

pixels na hora que bacana vou reduzindo Aqui ó pode ver que a segunda sempre tem 200 Pixel E aí se passar para terceira ó aí continua normal continua seguindo alto aí que é o padrão né então ele se encaixa lá então isso é muito legal que a gente pode fazer também se você quiser falar que a terceira linha também tem a 200 pizza pode passar aqui também então ó aí tem 300 Pixel 200 Pixel também então é uma forma que a gente pode utilizar também tá então vou até comentar aqui para deixar comentário para vocês

e também a gente pode ter aqui o Grid Grid alto Rose eu passar no valor por exemplo sem Pixel aqui que que isso vai fazer né então isso ele vai fazer com que ele Gere as linhas né as Rose aqui com o tamanho que a gente passar então eu falei aqui ó automaticamente ela tem que ter 100 Pixel então quando tiver ó tá vendo que cada itenzinho né cada linha Nossa aqui ela vai ter 100 Pixel quebrou para ele de baixo continua tendo sem Pixel aqui então isso é muito legal que dá pra gente criar

uma Grid bem personalizada também se você não quiser personalizar com o template Rose você pode colocar o auto Rose também que é outra forma que a gente pode fazer aqui e pra gente fechar com chave de ouro eu vou mostrar para vocês uma forma que a gente pode utilizar por exemplo com mídia Carey para adaptar usando repeat por exemplo Então bora lá vamos supor Deixa eu tirar aqui o nosso template Rose aqui vou comentar porque eu não quero exibir isso aqui vamos supor então que você quer que ele tenha um alto Fit vamos até comentar

isso aqui vou trazer aqui o Auto Fit Aqui para baixo eu vou te comentar então vou deixar o nosso Auto Fit então ó ele vai manter aqui o tamanho que ele conseguir legal só que quando tiver no tamanho de tela menor eu quero que ele re em alguma quantidade específica então por exemplo eu posso colocar aqui uma arroba mídia e screen and Max Weber então a máxima largura da tela for 700 e 20 pixels eu quero então fazer alguma coisa eu quero acessar o nosso ponto conta container e eu vou usar aqui o nosso Grid

collors e vou usar aqui por exemplo repite de três vírgula um FR Então olha que bacana Quando a gente tiver no tamanho grande ele vai encaixar tudo que ele conseguir Mas deixa eu abrir aqui o nosso inspecionar Vou deixar aberto vou Minimizar Deixa eu só desmarcar aqui opçãozinha aqui de cima mas quando a gente for diminuindo aqui ó tô diminuindo diminuindo e ele vai chegar no nosso máximo de 720 vamos lá vamos lá ó máxima de 720 ele vai sempre Ó repetir aqui em três colunas legal então vamos supor aqui vou copiar e vou colar

que caso usuário diminua mais ainda a tela chegue em 520 Pixel por exemplo aí eu quero que você use uma coluna Com uma fração então ele tem que se adaptar lá o tamanho que ele conseguir então por exemplo vou até clicar aqui para a gente adaptar o menu mobile eu vou aumentar aqui para a gente poder visualizar Então olha que bacana que a gente fez vou dar um responsive a gente conseguiu usar o MediaFire para Além de usar o nosso Grid para ela se adaptar também com base no tamanho da tela do usuário que é

uma coisa simples que a gente pode fazer então vamos supor aqui o usuário tá no tamanho grande que é o tamanho de tela ali é num desktop E aí beleza ele encaixou tudo aqui porque o padrão aqui do nosso container eu falei para ele ter um Auto Fit então eu falei para ele e o tamanho que ele conseguir Mas se você for diminuindo o tamanho da sua tela e chegar numa largura que seja máxima de 720 eu quero que tenha três colunas e ela assistir aqui nessas três colunas então se eu for diminuindo ou diminuindo

ó tá vendo aqui a largura vou chegar em menos de 720 ó 720 aqui ó 707 Eu tô né então ó pode ver que ele já encaixou aqui de no máximo três colunas então três colunas quebra para dentro de baixo por aí vai agora se a gente diminuir menos e colocar uma largura máxima de 520 eu falei ele ter uma repite ou seja ele vai repetir Um item por coluna de uma fração ou seja ele vai encaixar o tamanho inteiro do container né se espichar lá dentro então se eu reduzir aqui ó para uma largura

aqui de menos de 520 ó vou reduzir vou reduzir ó 512 pode ver que agora é menor Olha que bacana agora o adaptei pro nosso agride ter um item só repetir Um item Um item Um item e usamos o nosso máximo que é um FR aqui para ele encaixar o tamanho máximo que ele conseguir então Olha que bacana então se tiver num celular pequeno já encaixa a nossa grite se tiver num celular um pouco maior por exemplo um Tablet Ele usa o três se ele tiver num desktop por exemplo eu quero que ele tenha o

tamanho de Grid infinita por exemplo que a gente usou aqui né o alto Fit aqui por exemplo então é muito legal que a gente pode usar o Grid para adaptar de forma simples aqui usando né o CSS e Grid então eu espero que você tenha gostado desse vídeo aqui se você gostou se você aprender alguma coisa com esse vídeo comenta aqui embaixo alguma coisa comenta também Qual que é o próximo vídeo que você quer ver aqui dentro do canal então te vejo no próximo vídeo se inscreve e deixa o seu gostei aí e comenta pra

mim saber que eu vou ler todos os comentários aí mesmo que você quer deixar uma pergunta para a gente fazer algum vídeo ou responder alguma pergunta em vídeo aqui ó comenta aqui embaixo até o próximo vídeo e até mais