Unveiling CSS Grid in practice | Mayk Brito

Heey Dev, Everything okay? 💜
If you're now getting to the world of web development, you haven't had a lot of problems with layout design. Or have you?
Okay, okay... Let's study CSS Grid to help us mount our layouts, and if you have doubts about Flexbox vs Grid, this video will help you with this one.
Grid has the power of being two-dimensional, dividing our page in rows and columns, giving us the flexibility of putting elements anywhere on our screen.
Let's study !!
Repository: github.com/Roc... (in Portuguese)
-----
Follow Rocketseat on our social media:
Website: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Community: comunidade.rock...
Blog: rocketseat.com...

[@TheVictorSantiago]

Uma pequena correção: *1fr* significa uma fração (1 fraction), o grid vai _magicamente_ calcular quanto espaço *1fr* vale e mostra o resultado na tela. Por exemplo, caso você tenha uma com 400px de largura (width), e queremos dividir essa área em três colunas, duas pequenas à direita e à esquerda com 100px de largura cada, e uma maior no meio com 200px de largura, podemos escrever da seguinte forma: (grid-template-columns: 1fr 2fr 1fr;) O grid dividirá a largura do elemento baseado nas frações que você informou. E equivale a escrever: (grid-template-columns: 25% 50% 25%;) Mas o *fr* nos poupa de fazermos cálculos nos mesmos. Dizer que 1fr equivale a um flex dá a impressão que aquela área do grid irá automaticamente receber (display: flex;), o que não acontecerá de fato.

[@maykbrito]

Excelente visão Victor. Obrigado por compartilhar conosco. Peguei seu ponto. Quer dizer, o fraction é flexível. Assim como 'flex' significa 'flexible' ou flexível. Poderíamos assumir que uma fração sempre será flexível. Ou seja flex. Certo? Evidente que não estamos falando de display flex e poderíamos eliminar a possibilidade de compreensão dúbia. Mas é sempre bom pensar nos diversos tipos de compreensão, e essa apresentada por você é uma delas. Faz todo sentido. Então eu concordo contigo mesmo. Faltou uma explicação mais detalhada sobre a fraction, e a sua foi excelente. Por isso, extramente grato meu brother. Obg DEMAIS. TAMO JUNTO!!

[@lucaslicar3713]

não tinha sacado essa do fr no vídeo, mas sua explicação deu pra compreender, valeu!

[@diogenespasqualoto]

@@Lucas-pk8twtu veio num video de quase 40 min feito por ele p dizer isso ? akskaja vai te tratar mlk

[@diogenespasqualoto]

me diz o outro sobre entao, to atras de varios videos.

[@drslx]

@@Lucas-pk8tw 1fr e uma fração do espaço disponível e será flexível

[@donvoid]

E pensar que demorei vários videos pra aprender Grid kkkkkkk enquanto na Rocketseat ensinam tudo certo em meia hora

[@maykbrito]

oaiehieaheai EXCELENTE!! que bom que gostou brother heheh

[@animationcjs]

CSS grid ele e só usado para fazer app ?

[@hmbrasil2]

Excelente! Adorei

[@raulmello4090]

@@animationcjs O CSS Grid é uma mão na roda para qualquer aplicação que use CSS e você precisa organizar vários itens

[@animationcjs]

@@raulmello4090 ele e melhor de aprender ?

[@sirineujunior]

Consegui entender completamente neste vídeo, em que outros eu não conseguia. Super didático, explicativo, a forma de ensinar, eu simplesmente entendi o conceito tudo, muuito obg, por essa vídeo aula.

[@matheusdecampos430]

Que aula senhores, me ajudo muito. Se possível faz uma aula aplicando o Flexbox detro do Grid. vlw Mayk.

[@maykbrito]

Grande ideia Matheus!! Vamos preparar algo nessa pegada sim

[@matheusdecampos5684]

Matheus do futuro já empregado mandando um salve pro maykola que ajudou a compreender um pouco dos conceitos do CSS GRID no passado ! hahaha

[@raphaelmardine8814]

@@matheusdecampos5684 carai brabissimo kkkkkkkkk

[@ramonalmeida6927]

Mas que aula do caralho, eu estou no meio de um curso de HTML e CSS e parei pra pesquisar sobre o assunto(grid) por que não estava entendendo muito bem. Essa aula foi extremamente esclarecedora.

[@aurinojunior97]

As vezes fico surpreso com a quantidade e qualidade desses conteúdos de forma free, parabéns e obrigado.

[@edisonjunior75]

agente não da ideia ...silencio...rsss

[@sinhuu.s2]

@@edisonjunior75 boa kkkkkkk

[@luchaostar]

Meu deus que aula perfeita mano, eu nunca tinha tido contato com CSS Grid e depois de 36 minutos de aula já tô usando em todos meus projetos web, valeu mesmo!

[@edisonjunior75]

Poxa cara valeu muitíssimo pelo vídeo. Aprendi de uma forma que bagunçou meu cérebro...absurdamente mais fácil o seu.. obrigadão. Seus vídeos ficarão nos FAVORITOS porque são muitos bons...

[@user-cu5nn6ig6k]

AMEIIII ESSA AULA! Sou Estagiário de Dev Back-End, e como todo Back-End, a gente sofre para alinhar divs e layouts quando precisamos, hahahahah. Agora não vou sofrer mais! Obrigado por essa Aula!

[@nicolysantos6064]

Rocketseat salvando toda uma geração, agora eu consigo resolver meu projeto!

[@marcellu-s]

aprendi em 36 minutos o que eu não entendi em 4 horas no curso e em diversos outros vídeos de mesmo assunto. Ótimo didática

[@alexantonio7420]

Muito boa a didática, fácil compreensão do conteúdo. Aprendi rápido e consegui já logo em sequencia realizar exemplos já com responsividade do media queries, ficou perfeito. Muito obrigado pelo conteúdo.

[@euliberato]

Eu não sou muito de comentar em videos, mas este realmente merece!! Parabéns, que video, que video...!!

[@88jrfred]

Rapaz esse cara é foda, eu morria de medo de grid, agora vou fazer com confianca de mais. Rocketseat matou a pau contratando o Mayk kkkk

[@eduardodefati4892]

Puxa vida! Já vi professor bom na net .. mas vc é top demais cara. Simples objetivo bem distribuído o conteúdo. Show de bola! Parabéns mesmo!

[@juliartei]

Finalmente entendi. Algo que eu achava super complicado e depois da sua aula se transformou em algo simples de compreender, aula incrível.

[@danielsoadearaujo]

Cara, esse professor é o melhor professor que eu já vi. Pode fazer qualquer curso com ele que eu compro, didática sem limites Quem dera os professores das faculdades fossem assim..

[@ricardojosealves9836]

Parabéns demais pela aula. Sem enrolação, muito didático e de graça. Sem palavras, só agradecer mesmo!

[@GuilhermeKulkamp]

Sem dúvidas esta foi a melhor explicação que eu encontrei sobre grid aqui no youtube. De forma direta e didática.

[@willsandres]

tnc vey dps de assistir a 1000 aulas e ler 10.000 artigos sobre, caindo aqui de para-quedas aprendi em 36 min o.O Obg ♥

[@jotamelo3264]

Parabéns! Um verdadeiro "livro falante". Fácil de aprender e estimulante.

[@Alexandrecosta01]

De todos os tutoriais que já vi no KZbin esse foi de longe o melhor.

[@johnsykes4513]

Nem sei o que dizer sobre essa aula, esse Mayk é fora de série. É um professor por essência.

[@rocketseat]

hahaha Mayk é fera demaais!!! Valeu pelo feedback! 💜

[@antonysantos9450]

Cara sua forma de explicar é INCRÍVEL, pintar cada parte e sair testando foi genial, obrigado pela aula

[@trezentosfull]

Mais mastigado do que isso, não tem! Parabéns brother pela qualidade de ensino.

[@juliolemos639]

Melhor abordagem sobre o tema, que já assisti, até o momento.

[@albinofreitas3776]

Caramba. Conheci a Rocketseat na semana oministack e me apaixonei pela didática/conteúdo. Cada vídeo novo é uma tonelada de conteúdo bem adquirido e da forma mais simples possível. Ps. agora sou aluno da gostack 8 com orgulho

[@maykbrito]

Grande Albino. Seja bem vindo brother. Bora pra cima.

[@carolfreitas_devjr]

Pesquisei e vi muitos vídeos a respeito, esse foi o unico que me ajudou a realmente entender. Muito Obrigada!

[@paulosergiogodoiportugal5329]

Mayk explica melhor que muitos professores de curso pago. Metodologia incrível... obgd de coração pela aula.

[@Askki]

Justify e aligth agora abriu a cabeça, essa questão de horizontal e vertical é mt importante

[@edenpaulocruz]

Melhor explicação sobre CSS Grid que eu vi. Parabéns @Mayk Brito Parabéns @Rocketseat!

[@eduardovieira2481]

Tô chegando agora no mundo de Desenvolvimento Web e já ganhou mais um inscrito, ainda não vi as demais aulas, mas somente por essa, pude observar a qualidade das aulas ministradas. Obrigado e vamos adquirir mais conhecimentos.

[@jaison12356]

SEM COMENTÁRIOS.....MELHOR FORMA QUE APRENDI GRID MAYK BRITO SIMPLESMENTE UM DOS MELHORES!!!

[@rocketseat]

Woooow! Que massa, Jaison! A didática do Maykão é sensacional mesmo! 💜 😍

[@bobcv]

Essa aula é literalmente como se diz "quer que eu desenhe?". Show demais. Não tem como não entender. Entendi melhor como funciona e pra que servem certas classes quando mexo com bootstrap. Parabéns. Manda mais. Hehe.

[@edisonjunior75]

Demais....tbm achei o cara é muito simples e didatico em passar as informações

Que aula fantástica! =) Estou cursando Full Stack Python na EBAC e essa aula é infinitamente melhor que o módulo de CSS do curso! Fantástico!

[@Pedro-dw3if]

Grid não tava entrando na minha cabeça de jeito nenhum. Com essa aula, esclareceu demaissss

[@cognito_decifrado]

Cara muito bom, estava sentindo falta desse conteúdo no canal. Sou iniciante, porém não vi ainda esse tipo de conteúdo voltado à iniciantes, e explicado assim tão minuciosamente cada elemento.👏👏👏

[@josebelo3475]

Fala Mayk, parabéns pelo vídeo e muito obrigado por eliminar muitas duvidas minhas e ajudar muito nos meus estudos de css3, html e javaScipt. Com esta ferramente a gente escreve e testar em tempo real, muito bom mesmo. Mais uma vez obrigado e parabéns pela didática. Abraço

[@levifiigueiredo]

Cara, parabens pelo seu trabalho e desempenho. Sempre que assisto algum conteúdo seu raramente tenho dificuldades de entender, sem contar que sua imposição de voz traz satisfação em assistir o conteúdo do início ao fim! Novamente, obrigado pelo conteúdo e parabens pelo seu desejo e empenho em ajudar da forma que tens feito. Desejo a você e todos quem vc ama, muita saúde e sucesso!

[@studio_fornasier]

Não tenho palavras de gratidão para o Mayk, cara é muito fera para explicar as coisas, comecei a assistir achei que iria ser um terror para compreender, mas depois vi que facilidade de usar Layout Grid, sinceramente só tenho a agradecer vocês pessoal da Rockeatseat, que gasta o tempo de vocês ajudando todos que tem dificuldade de compreender como funciona CSS, um abraço pra vc "Maykão" vlw!

[@thiagovieiravlog]

Mayk Brito, você é o cara! Quando eu crescer quero ser assim igual a você.

[@renancalcagno508]

Parabéns pela didática, incrível a clareza a simplicidade como explicou.

[@VitorMat0s]

Os 36 minutos mais bem gastos do meu tempo hoje, estava com dificuldades em compreender o grid e esse video ajudou demais a entender como utilizar, obrigado pelo video foda Mayk Brito, didatica excelente digna de um Oscar kkk.

[@alexandroabadeyt]

Explicação muito fluída, fica muito fácil de entender com essa didática Mayk Brito.

[@franklyndellano7538]

Mano, eu estou maravilhado com essa aula e com o maestro desta obra. 3 anos após mas está perfeita essa aula e explodiu minha mente com mais esse conteúdo. LIKE até entupi minha conexão! Valeu.

[@demetrius_araujo]

Mayk, tu ensina bem pra kct!! Parabens! Se der, faça mais videos sobre esse assunto

[@walterb.telesteles58]

Estou estudando na plataforma... E estou aprendendo muito.... Obs. Gosto muito das sua aula muito top...

[@K1LL3RH1GT3CH]

Melhor vídeo de longe cara até baixei ele para rever pois estudei varias vezes sobre como dimensionar e posicionar itens na página, não sabia me localizar pois não entendia o funcionamento do grid, aprendi aqui em 10 minutos o que não aprendi em mais de 20 horas de estudo, valeu cara vc é d+ e muito didático

[@meteamaegames3314]

O único vídeo que realmente me ajudou com Css Grid!! Parabéns!!

[@muh134]

Finalmente, depois de muitos vídeos eu entendi o Grid. Maykão é top! Muito didático!

[@wandersongomes8405]

Passei um longo tempo sem estudar isso. E agora vendo. Nossa mano agora o negócio tá muito, mas muito mais fácil. Obrigado por este excelente vídeo.

[@DanielRios549]

Usar grid pra fazer o layout por fora e flexbox nos itens desse grid, ah tá doido, é um tesão do cassete, CSS é uma das linguagens que eu mais gosto, mesmo não sendo programação, os poderes do CSS são muitos grandes

[@vagnerazevedo2014]

Didática espetacular! Parabéns, Mayk e ao pessoal da Rocketseat por tanto conteúdo de qualidade. Esse vídeo "me salvou" na minha codificação aqui. Sou iniciante do React e tenho visto vários vídeos de CSS mas não tinha entendido ainda como melhor posicionar objetos e conteúdos dentro das áreas (header, main, footer) e esse vídeo me deu uma grande clareza. Valeu!

[@wandersonalwes2428]

Incrível cada aula da rocketseat, puro conhecimento, sem enrolação. É difícil não aprender 😁

[@suss8644]

Eu estava sofrendo para encontrar alguém que explicasse o grid Você... VOCÊ!!! Você conseguiu me fazer entender o grid Sua explicação é a melhor Entendi tudooo Excelente explicação!!! Obrigadoooo!!!

[@gabrielopescador2122]

Muito bacana essa forma do mayk de ensinar, mostra primeiro a forma difícil de fazer pra depois mostrar a forma fácil.. Bacana de mais, parabens

[@jspansini]

Sou obrigada a vir aqui agradecer de joelhos haudushsh pq cara que facilidade q tu tem pra explicar as coisas!!! Fã 👌

[@eprogramar]

Cara que aula, que aula! Eu que vim da época de Delphi e C# Windows Form agora eu vi vantagem fazer layouts na web 😁 Parabéns mais uma vez cara 👏🏼👏🏼👏🏼

[@tassiosantos5693]

Mt obrigado mayk, ja faz tempo que estou tentando aprender grid mas considerava complexo de mais, hoje minha visão mudou✌🏽

[@giusper3954]

Mano do ceu, não sabe o quanto isso me ajudou, deusss

[@andersonleite766]

Melhor aula que assisti hoje.Obrigado

[@jhonatanhenrique294]

ótima didática, aprendi e entendi sem precisar ver 2 vezes, muito bom

[@alessandrorodrigues9149]

Parábens! Sua didática é muito boa! Excelente aula!

[@CanalDoVerdao]

A idéia é fácil e reaolmente muito boa e funciona bem pra facilitar a vida do dev, o ruim são os detalhes. Detalhes do código que complica, a estrutura detalhada é complexa, no entanto a estrutura bpásica seria teoricamente fácil, se não fossem os detalhes.

[@fs-thiago]

Estudei grid em vários outros lugares e neste video ele exemplificou todo aquele longo e longo processo. Muito bom, com certeza vou recomendar.

[@over3041]

sensacional, o bom que tive que pesquisar sobre o gap que agora se usa diretamento na row e no columns e nao mais dessa forma que vc passo, muito bom mike valeu

[@FelipeSilva-ik8vo]

Cara, antes desse vídeo o css-grid nunca entrava na minha cabeça, didática incrível do @MaykBrito!

[@vinicripto485]

Altamente didático, usando background color e não imagens ficou bem mais fácil de entender

Muito legal o vídeo, sempre tive uma dificuldade maior em CSS (trabalho mais com backend e mobile) e esse vídeo foi uma mão na roda pra mim. Faz um vídeo fazendo isso aí que você fez sendo responsivo, Mayk! Valeu!

[@majordocomandonegro]

que aula fo*ástica, tudo que vc precisa saber em um video curto e bem explicado, grid é algo que não me entra direito na cuca, geralmente tenho problemas com algum elemento que tenha position absolute, dai quebra tudo o layout do grid, valeu pela grande aula, !!!

[@TalesCembraneliDantas]

Cara, melhor aula de css q eu já vi na Net, bem explicado, aprendi muito com vc hj, valeu mesmo

[@WilMaster]

Como alguém pode dar dislike nesse vídeo? aula muito boa e prática... sem enrolação

[@mbs2488]

S E N S A C I O N A L ! TUDO Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

[@miguelandrade2567]

Cara que aula maravilhosa, demorei um pouco mais de meia hora mas consegui entender o que nao entrava na cabeca a dias, parabens!!!!

[@jonasbezerradasilva8493]

MELHOR AULA É COM ELE. MAIK BRITO

[@pc_jean]

Excelente!!! Eu estava tendo dificuldades para entender o conceito de grid... e vc conseguiu eliminar essa dificuldade por completo. Muito obrigado manolow!

[@franciscomagri]

Parabéns Mayk!! Explica muito bem.

[@PauloSantos-001]

Muito legal a aula. Pra quem está acostumado com C#, onde a gente desenha os itens onde quer no formulário, o html parece uma esculhambação. Agora já to olhando diferente. Parabéns pelo vídeo.

[@rocketseat]

Hahaha valeeeu Paulo! 💜💜

[@MrGlaiconn]

Melhor aula desse assunto que vi no KZbin. Obrigado.

[@linuxdebivan1040]

Melhor conteúdo de CSS Grid que já vi. Parabéns

[@ProxyZeroPlayer]

Sem palavras para descrever o quão bom foi sua aula.

[@jonathasveiga4799]

Eu achando que era algo super complicado de entender. E é super de boa a princípio. Só eu praticar e enraizar isso. Valews mesmo

[@raulmello4090]

Que aula, parabéns, passei a semana inteira estudando grid com apostilas, até mesmo no site da W3Schools e não tinha entendido como entendi agora. Vlw

[@mycibre1048]

sua didática é muito boa moço, parabéns!

[@fantamostroke6400]

Boa!! Faz um vídeo sobre como deixar os layouts responsivos, mobile-first e media queries

[@ciromoraess]

A didática do Mayk é incrível!!!

[@rocketseat]

Fala, Ciro! Valeeu pelo feedback! Mayk é fera demais né? 💜💜

[@Hustto983]

Top. A melhor aula de CSS GRID. Que ja vi sem frescura

[@rocketseat]

Valeeeeeu! 🚀

[@rocketseat]

Valeeu, Francisco! 💜

[@arielsouto8337]

Eu nem terminei o vídeo, mas tive que pausar para vir dar um like e comentar. INCRÍVEL! Didática excelente e ensinando algo que eu NUNCA havia encontrado em nenhum lugar. E olha que eu sou bom em pesquisar na internet. Tudo o que eu achava de CSS eram ensinamentos complicados que não me davam a liberdade que eu tanto queria. Parabéns. Continue ensinando! E faça uma série de CSS, pois no mercado de trabalho exigem o domínio de CSS (antes de saber Bootstrap e Front-end Frameworks) e eu estou com dificuldade de achar um bom curso para domínio do CSS. Grande abraço e bons estudos.

[@johnsykes4513]

esse mayk é um monstro...

[@allancisneiro287]

cara parabéns, que didática top. daria mil likes se pudesse. obrigado

[@AnderCarlosNunes]

Cara, que aula, que explicação show de bola. Mato a pau! 😎👍 Fica aqui meus parabéns, Professor.

[@spacecss6636]

Nossa eu nao sabia sobre grid, demorava horas pra conseguir fazer isso. Agora vai ficar muito mais facil!!!

[@em33b]

So passando pra registrar que eu presenciei esse conteúdo valioso

[@ruanvalente7496]

Valeu Mayk pelo conteúdo !! Show de bola sucesso pra você e toda a equipe !!

[@maykbrito]

valeu Ruan!! tamo junto brother!!

[@Tuchauaa]

Acordar com um conteúdo lindo desse. Sucesso Rocketseat! Voa.

[@maykbrito]

daaalleeee.. pra cimaaa!! vamo que vamo!

[@nicolas_galdino]

Te amo Mayk seu lindão! Show de bola, estava cortando um dibrado para entender isso.

[@cestarop]

Provavelmente alguns dos 30min mais bem gastos da minha vida! Que aula!!!

[@rocketseat]

Valeeu pelo elogio, Pedro! 💜💜

[@cestarop]

@@rocketseat eu que agradeço !

[@albertozaranza]

Depois faz uma parte 2 sobre responsividade e media queries

[@maykbrito]

Excelente.. Vou fazer um aplicando no mundo real.. vc vai curtir!!!

[@sadrakss]

@@maykbrito Aguardando...Obrigado por compartilhar conhecimento! Sucesso!

[@albertozaranza]

@Alan C., são um módulo do css que permite que a renderização do conteúdo se adapte a resolução de tela, por exemplo

[@albertozaranza]

​@Alan C. Isso mesmo

[@iamtchelo]

@@maykbrito faz com mobile first! haha =)

[@brNoMundo123]

Parabéns por explicar tão bem e ser bem organizado nas suas ideias

[@LabEcho360]

Estava curioso sobre o CSS Grid e como funcionava, pois sempre usava os floats e vez ou outra tem uns errinhos chatos no responsivo kkk depois desse vídeo de Grid bem dinâmico aprendi que a vida fica bem mais fácil com CSS Grid e o flex valeu Rocketseat ! : )

[@rocketseat]

Que showw André!! Ficamos felizes em te ajudar! Só vai!! 🚀

[@tiagoleal6985]

Virei fã do mayk nesse mel 2. Agora é meu teacher. Abração meu.