00:00:00 - Introdução: CSS Grid 00:00:59 - Iniciando com HTML/CSS no Codepen 00:02:36 - CSS Grid vs Flexbox 00:04:33 - Criando o container e filhos no HTML 00:06:20 - CSS Reset básico 00:08:16 - display: grid; no container 00:09:04 - grid-template-columns e grid-template-rows 00:13:00 - grid-auto-rows e grid-auto-columns 00:14:44 - CSS Grid no Google Chrome Developer Tools 00:18:15 - Terminologias e termos de CSS Grid 00:19:14 - grid-gap, gap, row-gap, column-gap 00:21:05 - minmax no CSS Grid 00:23:45 - repeat no CSS Grid 00:25:37 - auto-fill e auto-fit: layout responsivo 00:29:08 - grid-row e grid-column para span (expandir) 00:34:47 - grid-area e grid-template-areas 00:38:35 - Layout com grid-template-areas 00:42:26 - Alinhamento com justify-content 00:46:33 - Alinhamento com align-items e align-content 00:49:37 - Alinhamento com justify-items 00:50:46 - Alinhamento com align-self e justify-self 00:51:41 - Alinhamento: resumo 00:53:14 - Finalizando 00:53:44 - Não esqueça de curtir o vídeo
o curso full-stack do otávio miranda na UDEMY custa 5% de outro que paguei, e a didática é muito melhor ... dps vou ver se pego o curso de REACT/NEXT dele na Udemy. Por 27 reais ta de graça ... Parabéns pelo conteúdo, material de primeira qualidade!
Suas aulas sempre me salvam, quando não entendo algum assunto no meu curso, eu venho nas suas aulas pq tenho certeza que vou entender!! Parabéns suas aulas são millll!!!
vc me fez entender os posicionamentes e columns e rows em 30m pois vi em 2x kkkkkkkkkkkkkk e eu tava meses sem entender,obrigado por esse ouro de conteudo 😱
cara, estou fascinado com sua aula, curso fullstack na labenu as 3 meses essa semana entramos no gird, vi varios videos, e so o seu que eu conseguir enteder seu metodo e exelente nevel havard, agora so sigo vc e vejo os seus videos, esta me ajudando muito mesmo
Muito bom! Me ajudou demais. Estava procurando há tempos entender o conceito, que necessito para um projeto, mas não estava pegando o jeito. Com suas explicações compreendi perfeitamente como e por que é que devia, mesmo, usar grid. Muito grato!
Aula de altíssima qualidade, merece muitas views e "gostei". Parabéns e continue com o excelente trabalho que tu proporciona aqui no youtube e em seus cursos na Udemy!!!
Que aula fantástica descobri a dimensão fr e várias funções que não sabia que existia no css, 'pra mim só existia a calc()', além de descobrir também que dá pra dimensionar os items de um grid-template-area, para outras linhas. Aula show de bola professor!
mesmo sendo aluno de tres dos seus curso na Udemy(JavaScript, Python 3 e se não me falha a memória no momento o de Django), por sinal todos maravilhosos, eu super recomendo, Professor tire uma dúvida por favor com o uso do Flex Box e Css Grid, como fica o Bootstrap devemos deixar o bichinho meio que de lado, ou é possível usa-los junto, se poder nos presentear com um exemplo ficarei muito grato. uma noite abençoada e fique com Deus.
Caro otávio, meu grid está dando megacerto graças à compreensão inicial que teu vídeo propiciou. Gostaria de te fazer uma pergunta, mas fica à vontade para responder apenas se puder. Estou usando em uma aplicação um pouco complexa, e com fins bem específicos, que envolve manipular via javascript as propriedades style.gridRowEnd atribuindo "span " + n para que cada célula ocupe o tanto de linhas do grid apropriadas, de acordo com os fins da aplicação. Todas as células ocupam 1 coluna do grid só. Entretanto, apenas 90% delas ocupam somente 1 linha, sendo que uns 9% ocupam duas linhas, e algumas - poucas, porém não zero - ocupam duas ou mais linhas do grid. Minha pergunta é: tenho como, via JS, ter uma referência para a célula que ocupa, digamos apenas como exemplo, a linha 14 da coluna 5 do grid? Lembrando que essa célula pode começar e terminar na linha 14, pode terminar na 15 ou 16 ou 17..., ou começar na 13, 12, 11.... Em qualquer caso eu precisaria a referência desse elemento no DOM.
No minuto 34:30 quando é feito grid-column, automaticamente o grid-row deixa de funcionar (o grid-row; estava com os valores 4 / span 2). Ou seja, o grid-column é "mais forte" que o grid-column? Se alguém poder explicar porque a configuração do grid-row saiu, agradeço. :)
conteudo ótimo, tenho alguns cursos seus na udemy, mas pfv não poem musica tenho tdah e tenho que me esforçar muito pra não perder a concentração no curso e desviar pra musica de fundo
00:00:00 - Introdução: CSS Grid
00:00:59 - Iniciando com HTML/CSS no Codepen
00:02:36 - CSS Grid vs Flexbox
00:04:33 - Criando o container e filhos no HTML
00:06:20 - CSS Reset básico
00:08:16 - display: grid; no container
00:09:04 - grid-template-columns e grid-template-rows
00:13:00 - grid-auto-rows e grid-auto-columns
00:14:44 - CSS Grid no Google Chrome Developer Tools
00:18:15 - Terminologias e termos de CSS Grid
00:19:14 - grid-gap, gap, row-gap, column-gap
00:21:05 - minmax no CSS Grid
00:23:45 - repeat no CSS Grid
00:25:37 - auto-fill e auto-fit: layout responsivo
00:29:08 - grid-row e grid-column para span (expandir)
00:34:47 - grid-area e grid-template-areas
00:38:35 - Layout com grid-template-areas
00:42:26 - Alinhamento com justify-content
00:46:33 - Alinhamento com align-items e align-content
00:49:37 - Alinhamento com justify-items
00:50:46 - Alinhamento com align-self e justify-self
00:51:41 - Alinhamento: resumo
00:53:14 - Finalizando
00:53:44 - Não esqueça de curtir o vídeo
MANOOOO MELHOR AULA DE GRID Q JA TIVE 😍😍
o curso full-stack do otávio miranda na UDEMY custa 5% de outro que paguei, e a didática é muito melhor ... dps vou ver se pego o curso de REACT/NEXT dele na Udemy. Por 27 reais ta de graça ... Parabéns pelo conteúdo, material de primeira qualidade!
Impossível sair dessa aula sem curtir e agradecer pela qualidade da explicação!
Nós que agradecemos!
Mano meus parabéns pela didática, vc me ensinou algo que na faculdade estava difícil de aprender.
Suas aulas sempre me salvam, quando não entendo algum assunto no meu curso, eu venho nas suas aulas pq tenho certeza que vou entender!! Parabéns suas aulas são millll!!!
vc me fez entender os posicionamentes e columns e rows em 30m pois vi em 2x kkkkkkkkkkkkkk e eu tava meses sem entender,obrigado por esse ouro de conteudo 😱
Cara top, top. Assisto muitos vídeo e playlist do "Fábio dos Reis" e você está no mesmo nível. Parabéns.👏👏👏👏👏
Terminei dia 27/06/2023. Procrastinação bateu forte, mas terminei kakakakaak muito bom !!!
cara, estou fascinado com sua aula, curso fullstack na labenu as 3 meses essa semana entramos no gird, vi varios videos, e so o seu que eu conseguir enteder seu metodo e exelente nevel havard, agora so sigo vc e vejo os seus videos, esta me ajudando muito mesmo
Pô, muito obrigado. De verdade
You have to do everything step by step and you will succeed. You must disconnect everything from PC protection. Thank you, Tutorials Buddy
video mais completo sobre grid que eu já vi, brabo
Cara! Seu conteúdo é muito top! Parabéns
Sua didática é excelente. Fácil aprendizagem. Continue nessa mesma pegada rsrsrsrs. TMJ
Agora eu aprendi!! você ensina muito bem , Otavio. Obrigado por compartilhar o seu conhecimento.
Que isso, é o que eu gosto de fazer, então eu que agradeço 😍
Uma das melhores aulas na internet sobre grid. Obrigado.
Muito bom! Me ajudou demais. Estava procurando há tempos entender o conceito, que necessito para um projeto, mas não estava pegando o jeito. Com suas explicações compreendi perfeitamente como e por que é que devia, mesmo, usar grid. Muito grato!
Que massa, muito obrigado Pablo 🥰
quanto mais vc fala mais vontade de aprender eu fico, a sua didatica é fantástica melhor que muitos cursos pago por ai, obrigado Otávio.
Ótimo vídeo aula, parabéns e muito obrigado por compartilhar.
Muito bom professor! Obrigado por compartilhar tanto conhecimento com a gente! Você é inspiração!
Que isso, eu que agradeço ☺️🙏
Ótimo
Otávio Miranda
Muito boa guerreiro, já comprei vários cursos seu sempre com uma qualidade absurda super incrível!🎉
Fico feliz em saber
Aula de altíssima qualidade, merece muitas views e "gostei". Parabéns e continue com o excelente trabalho que tu proporciona aqui no youtube e em seus cursos na Udemy!!!
Podexa, obrigado 🙏
Fantástico sempre... dou muita risada pela sua preocupação e doçura ao ensinar. Grata
otima aula , ate eu me escrevi por causa desta aula
Obrigado 🙏
Que vídeo excelente! Muito obrigada por compartilhar seu conhecimento :D
Melhor aula de grid! Excelente didática
Muito obrigado ☺️
Que aula fantástica descobri a dimensão fr e várias funções que não sabia que existia no css, 'pra mim só existia a calc()', além de descobrir também que dá pra dimensionar os items de um grid-template-area, para outras linhas. Aula show de bola professor!
Nossa você explica muito bem mesmo. Ótimo professor
Excelente aula, muito conteúdo com extrema qualidade 👏👏👏
Vlw mestre por compartilhar seus conhecimentos, excelente aula.
ótima explicação professor, obrigado !!
Eu que agradeço 🙏
Grato pela aula, boa didática. Gostando do conteúdo do seu canal. 🙏
Desculpa a demora, eu realmente não tinha visto seu comentário. Agradeço demais =)
Salve Otavao, cara comprei teu curso de python e cara esto pasmo, teu curso e muito bom, muito didático e to cada vez mais animado pra terminar ele!
Ebaaaa... aquele foi meu primeiro curso, então vejo várias coisas que podem e ainda vão melhorar muito nele. Que bom que gostou, obrigado =)
excelente aula professor
mesmo sendo aluno de tres dos seus curso na Udemy(JavaScript, Python 3 e se não me falha a memória no momento o de Django), por sinal todos maravilhosos, eu super recomendo, Professor tire uma dúvida por favor com o uso do Flex Box e Css Grid, como fica o Bootstrap devemos deixar o bichinho meio que de lado, ou é possível usa-los junto, se poder nos presentear com um exemplo ficarei muito grato. uma noite abençoada e fique com Deus.
Excelente vídeo! 👏🏻👏🏻👏🏻
top aula, tirou varias duvidas
Se é louco o melhor!
Top demais, mestre
Que material de qualidade.
Me ajudou muito.
Sensacional como sempre
Muito obrigado =)
Conteúdo de grande qualidade!
Valeu
Aula top
Caro otávio, meu grid está dando megacerto graças à compreensão inicial que teu vídeo propiciou. Gostaria de te fazer uma pergunta, mas fica à vontade para responder apenas se puder.
Estou usando em uma aplicação um pouco complexa, e com fins bem específicos, que envolve manipular via javascript as propriedades style.gridRowEnd atribuindo "span " + n para que cada célula ocupe o tanto de linhas do grid apropriadas, de acordo com os fins da aplicação. Todas as células ocupam 1 coluna do grid só. Entretanto, apenas 90% delas ocupam somente 1 linha, sendo que uns 9% ocupam duas linhas, e algumas - poucas, porém não zero - ocupam duas ou mais linhas do grid. Minha pergunta é: tenho como, via JS, ter uma referência para a célula que ocupa, digamos apenas como exemplo, a linha 14 da coluna 5 do grid? Lembrando que essa célula pode começar e terminar na linha 14, pode terminar na 15 ou 16 ou 17..., ou começar na 13, 12, 11.... Em qualquer caso eu precisaria a referência desse elemento no DOM.
Obs: quando digo "células" estou me referindo a elementos P que são os filhos diretos do meu grid.
Oooh professor muito obrigado por ouvir meu pedido nos comentários dos últimos vídeos rsrsrs
Kkkk eu que agradeço
Aula muito boa!!!!
Muito bom
Muito show
Valeus =)
como ajusta o autocomplete do code pen? to tendo que digitar tudo completinho :(((((
No minuto 34:30 quando é feito grid-column, automaticamente o grid-row deixa de funcionar (o grid-row; estava com os valores 4 / span 2). Ou seja, o grid-column é "mais forte" que o grid-column? Se alguém poder explicar porque a configuração do grid-row saiu, agradeço. :)
conteudo ótimo, tenho alguns cursos seus na udemy, mas pfv não poem musica tenho tdah e tenho que me esforçar muito pra não perder a concentração no curso e desviar pra musica de fundo
o flex não é tão "flex", já o grid é "bi"
sacanagem kkkkk