Unveiling CSS Grid in practice | Mayk Brito
ฝัง
- เผยแพร่เมื่อ 30 ก.ย. 2024
- 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...
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.
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!!
não tinha sacado essa do fr no vídeo, mas sua explicação deu pra compreender, valeu!
@@Lucas-pk8twtu veio num video de quase 40 min feito por ele p dizer isso ? akskaja vai te tratar mlk
me diz o outro sobre entao, to atras de varios videos.
@@Lucas-pk8tw 1fr e uma fração do espaço disponível e será flexível
E pensar que demorei vários videos pra aprender Grid kkkkkkk enquanto na Rocketseat ensinam tudo certo em meia hora
oaiehieaheai EXCELENTE!! que bom que gostou brother heheh
CSS grid ele e só usado para fazer app ?
Excelente! Adorei
@@animationcjs O CSS Grid é uma mão na roda para qualquer aplicação que use CSS e você precisa organizar vários itens
@@raulmello4090 ele e melhor de aprender ?
Que aula senhores, me ajudo muito. Se possível faz uma aula aplicando o Flexbox detro do Grid. vlw Mayk.
Grande ideia Matheus!! Vamos preparar algo nessa pegada sim
Matheus do futuro já empregado mandando um salve pro maykola que ajudou a compreender um pouco dos conceitos do CSS GRID no passado ! hahaha
@@matheusdecampos5684 carai brabissimo kkkkkkkkk
meu deus, eu me achava super moderna usando float
🤣🤣🤣
Assistir series na Netflix? Que nada!!! Vou ir vê as videos-aulas topzera do Maykão.
Hahahahahah tamo junto GABRIELZAUM. vamo que vamo heehhe
Depois faz uma parte 2 sobre responsividade e media queries
Excelente.. Vou fazer um aplicando no mundo real.. vc vai curtir!!!
@@maykbrito Aguardando...Obrigado por compartilhar conhecimento! Sucesso!
@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
@Alan C. Isso mesmo
@@maykbrito faz com mobile first! haha =)
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.
As vezes fico surpreso com a quantidade e qualidade desses conteúdos de forma free, parabéns e obrigado.
agente não da ideia ...silencio...rsss
@@edisonjunior75 boa kkkkkkk
Cara o maluco precisou de 15 minutos de video pra me fazer entender um troço que eu já vinha penando a vários meses.
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!
Boa!! Faz um vídeo sobre como deixar os layouts responsivos, mobile-first e media queries
Fala Mayk, muito boa aula, só um detalhe... Por volta dos 16 min você tava falando linha, mas acho que queria dizer coluna, não ?
desafio responder isso se for bom:
Grid é uma técnica de construção e desenvolvimento de layouts que auxilia na distribuição dos textos, ilustrações, fotografias, e demais elementos integrantes da peça, oferecendo mais rapidez, precisão e equilíbrio à peça. Com base no grid, analise as sentenças a seguir:
I- Os grids são compostos por margens que enquadram o conteúdo e geram espaço para as informações.
II- No grid são colocadas linhas guias horizontais e verticais para orientar a leitura e auxiliar na distribuição dos elementos.
III- O tamanho das linhas guias depende do diretor de arte e dos elementos da peça.
IV- O grid não precisa ser somente linear, ele pode adquirir formatos e estilos diferenciados.
Assinale a alternativa CORRETA:
A) As sentenças II e IV estão corretas.
B) As sentenças I, II, III e IV estão corretas.
C) Somente a sentença II está correta.
D) Somente a sentença III está correta.
quem acertar ganha bolo
🍰
Letra A?
não entendi muito bem, quando simplificou as tags header (h) ???
Só ficou confuso essa questão de "linha virtual" quando estava se tratando de colunas... isso ta certo? é assim mesmo que chamam?
Não sei se você já usou Photoshop, mas imagine as réguas do Photoshop agora imagine isso na página.. essas seriam as linhas virtuais
Uma linha virtual começa no topo de uma row (linha)
Vou usar *linha virtual* e *row* para diferenciar uma da outra
Linha virtual: é invisível
Row: visível
Voltando à explicação, imagine que você tenha *3 rows*, e aplique uma *borda no topo* de cada row, logo você veria 3 bordas, e apenas na última row você aplica uma *borda embaixo* , totalizando 4 bordas? Estas bordas seriam as linhas virtuais.. Acho que ficou melhor de entender, e sim elas existem, mas apenas virtualmente
@@TheXambitoGames Acho que agora entendi! Obrigado
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 👏🏼👏🏼👏🏼
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!
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.
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
Grande Albino. Seja bem vindo brother. Bora pra cima.
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.
Demais....tbm achei o cara é muito simples e didatico em passar as informações
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.👏👏👏
Programar é uma arte, CSS é uma ciência.
massa demais né???hehehe
Mais mastigado do que isso, não tem! Parabéns brother pela qualidade de ensino.
Cara, que aula, que explicação show de bola. Mato a pau! 😎👍 Fica aqui meus parabéns, Professor.
Fantástico, obrigado por compartilhar o conhecimento, esse assunto é novo pra mim pelo visto estou aprendendo no lugar certo.
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!
E eu que sou um programador e uso flebox + grid. tudo misturado kkk
ta certo, use oq for melhor para seu layout kkkkkkk o flex e o grid salvam muito nos layout.
Da certo fazer o grid do site e usar o bootstrap em cada item?
Por que existe essa linha imaginaria? Se eu quero 3 colunas então informo: grid-column-start: 1; grid-column-end: 4; e se eu quero duas linhas informo: grid-row-start: 1; grid-row-end: 3;
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 ♥
Finalmente entendi. Algo que eu achava super complicado e depois da sua aula se transformou em algo simples de compreender, aula incrível.
Valeu pela aula. Me permita te ajudar na pronuncia da palavra "height".... fala-se "ráit" com o t final bem curto, exatamente como você está fazendo. Só que você está falando "rêit", então fica parecendo que você está dizendo "Hate" (que significa ódio). No mais, obrigado por postar esse vídeo.
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
Mayk, tu ensina bem pra kct!! Parabens!
Se der, faça mais videos sobre esse assunto
Mt obrigado mayk, ja faz tempo que estou tentando aprender grid mas considerava complexo de mais, hoje minha visão mudou✌🏽
Excelente explicação, top! ajudou muito, parabéns!!!
Altamente didático, usando background color e não imagens ficou bem mais fácil de entender
Cara sua forma de explicar é INCRÍVEL, pintar cada parte e sair testando foi genial, obrigado pela aula
Boa, Mayk!! Mais um vídeo sensacional. Sucesso :)
Valeeeuuuuu lucaaaooo!!!
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.
Pessoal uma dúvida não entendi a explicação dele sobre o grid-template-rows:20vh 70vh 10 vh ele fala da altura que eu estou vendo, oque isso significa em qual lugar isso se situa ??
otima aula estava pesquisando sobre CSS grid,quero evitar usar algum Framework css
As linhas vão no máximo até 100vh? Porque no exemplo a primeira linha tem 20vh, a segunda 70vh e a ultima 30vh. E as colunas ? Porque como escolheu apenas 2 colunas n dá para saber.
cara simplesmente genial, ce me ajudou muito manoKLASJLJASDASD
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
Só eu que acho que deveria mudar esse justify e align items pra align-x e align-y poxa, seria 1000x melhor
Valeu Mayk pelo conteúdo !! Show de bola sucesso pra você e toda a equipe !!
valeu Ruan!! tamo junto brother!!
adeus Bootstrap... 36 minutos salvou a pátria. Parabéns!!!!
Vale a pena eu aprender fazer site da forma mais antiga? Sem flexbox ou grid? Tô tentando aprender mas tá difícil... Sou iniciante. Devo continuar como forma de aprendizagem ou pulo logo para o flexbox e grid?
background #7159c1 cor da Rocketseat
S E N S A C I O N A L ! TUDO Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
Cara, muito obg!!!!! CONTEÚDO NOTA 10, consegui entender d boa.
Excelente!!! Eu estava tendo dificuldades para entender o conceito de grid... e vc conseguiu eliminar essa dificuldade por completo. Muito obrigado manolow!
Melhor explicação sobre CSS Grid que eu vi. Parabéns @Mayk Brito Parabéns @Rocketseat!
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!
Já começa o vídeo falando de coisa que não é do vídeo. Só é vir pra tutoriais brasileiros que já me irrito.
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
So passando pra registrar que eu presenciei esse conteúdo valioso
CSS Grid e responsividade tá sendo meu "calcanhar de Aquiles" ultimamente
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..
O único vídeo que realmente me ajudou com Css Grid!!
Parabéns!!
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
Chega de Aula sobre Grid. Finalmente consegui compreender isso daí ! hhh
Eu to aqui quebrando a minha cabeça com flex box. eu achei o grid muito mais fácil e eficaz. sem comparação.
As anotações dessa aula, para quem quiser manter o conteúdo para acesso rápido nos momentos de urgência: www.notion.so/Grid-bddbcf6832e34819895b2cc790ab34b2
Seria interessante, criar mini projetos usando css grid, para vermos no desenvolvimento haha !
no "grid-area:" as marcaçoes "h". "m" que seja, não ficam marcadas, não mudam de cor. porque será?
amei o vídeo, muito bom!!!! desconheço uma explicação melhor.
Eu achando que era algo super complicado de entender. E é super de boa a princípio. Só eu praticar e enraizar isso. Valews mesmo
Sem dúvidas esta foi a melhor explicação que eu encontrei sobre grid aqui no youtube. De forma direta e didática.
Justify e aligth agora abriu a cabeça, essa questão de horizontal e vertical é mt importante
Te amo Mayk seu lindão!
Show de bola, estava cortando um dibrado para entender isso.
vídeo é tão bem explicado que tu fica desconfiado se é tão fácil assim mesmo hahahaha
No começo o Mayk quiz dizer coluna virtual ao invés de linha virtual?
muito obrigado por compartilhar conhecimento Mayk, você explica de forma muito pratica e clara, parabens ;)
Que bom que fez sentido pra você brother. Tamo junto nessa. Obrigado pelo comentário
Parabéns! Um verdadeiro "livro falante". Fácil de aprender e estimulante.
Esse css é do reactnative? eu só conheço do html
monstruoso demais show s2, voa foguete.
🚀
Parabéns demais pela aula. Sem enrolação, muito didático e de graça. Sem palavras, só agradecer mesmo!
Ficou mais difícil que antes..
Agora está cheio de regras.
eu testando qualquer display só pra ver funcionar visualmente kkkkkkkkk
Atualmente a propriedade grid-template-rows ainda funciona? Pra min n tá funcionando
Parábens! Sua didática é muito boa! Excelente aula!
Maykão faz um video sopre posicionamento relative e absolut
Eu não sou muito de comentar em videos, mas este realmente merece!! Parabéns, que video, que video...!!
Parabéns Mayk!! Explica muito bem.
Eu passei 3 horas assistindo esse vídeo, mas por burrice mesmo. O cara de fato explica em meia hora coisa que você nunca viu na vida.
O grid é muito bom pra quem quer adaptar o site pra mobile
Exatamente! 💜
Como que vc conseguiu colocar essa linha no VS Code pra marcar a qtde de caracteres?
Eu tentei de tudo o quanto e jeito e n consegui, teria como vc me dizer como vc fez?
Show de bola Mayk!!
Obg Wagner!!!!
cara parabéns, que didática top. daria mil likes se pudesse. obrigado
que aula foda
Ótima explicação. Parabéns!
Nada a dizer. Mentira... tenho sim, aula fantástibulosa
Incrível cada aula da rocketseat, puro conhecimento, sem enrolação.
É difícil não aprender 😁
Estou estudando na plataforma... E estou aprendendo muito.... Obs. Gosto muito das sua aula muito top...
Melhor aula que assisti hoje.Obrigado
Show de bola mano, mas elabora um layout utilizando esses conceitos, pois assim fica muito na teoria, são muitas coisas pra usar, a parada é como usar.
Eu poderia colocar o display grid no Body em vez de criar uma div pegando todo o conteúdo e inserindo nesta div o display:grid ?
Muito bom, deu pra ter uma visão geral do Grid. Apenas uma sugestão: poderia ter usado um exemplo prático no fim aplicando as diversas propriedades vistas nas aulas (uma page de teste mesmo). Fora isso 10/10.
Achei a explicação muito boa, parabéns!