CSS Grid - Tudo o que você precisa saber

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

[@INDLYLEOLIVEIRA]

MANOOOO MELHOR AULA DE GRID Q JA TIVE 😍😍

[@devdofuturo]

Impossível sair dessa aula sem curtir e agradecer pela qualidade da explicação!

Nós que agradecemos!

[@andrey-mn3sd]

Mano meus parabéns pela didática, vc me ensinou algo que na faculdade estava difícil de aprender.

[@fernandesfe3385]

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!!!

[@iDontHaveName-d5q]

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 😱

[@emersonliramonteiro]

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

[@catphelios]

video mais completo sobre grid que eu já vi, brabo

[@lucasfranca1144]

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 😍

[@fms1]

Uma das melhores aulas na internet sobre grid. Obrigado.

[@brendonalex4848]

Terminei dia 27/06/2023. Procrastinação bateu forte, mas terminei kakakakaak muito bom !!!

[@rocha_matheus]

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!

[@engebras-engenhariabrasili9977]

Cara top, top. Assisto muitos vídeo e playlist do "Fábio dos Reis" e você está no mesmo nível. Parabéns.👏👏👏👏👏

[@diegosantosmoto]

Melhor aula de grid! Excelente didática

Muito obrigado ☺️

[@raphaelalves4044]

Muito bom professor! Obrigado por compartilhar tanto conhecimento com a gente! Você é inspiração!

Que isso, eu que agradeço ☺️🙏

[@christophcury940]

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 =)

[@PioneiroYT]

Ótimo Otávio Miranda

[@app2028]

Muito boa guerreiro, já comprei vários cursos seu sempre com uma qualidade absurda super incrível!🎉

Fico feliz em saber

[@miltontsilva]

Ótimo vídeo aula, parabéns e muito obrigado por compartilhar.

[@pablocardellino6547]

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 🥰

[@pedrowfps1538]

Nossa você explica muito bem mesmo. Ótimo professor

[@darkshinaide]

otima aula , ate eu me escrevi por causa desta aula

Obrigado 🙏

[@priscillacarbonell3997]

Fantástico sempre... dou muita risada pela sua preocupação e doçura ao ensinar. Grata

[@ClashRoyale-pt9zj]

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 🙏

[@herlesnp2010]

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.

[@ricardoferreira3252]

Excelente aula, muito conteúdo com extrema qualidade 👏👏👏

[@guilhermecunha2375]

excelente aula professor

[@jackfelinto9029]

Vlw mestre por compartilhar seus conhecimentos, excelente aula.

[@rodrigovieira5204]

ótima explicação professor, obrigado !!

Eu que agradeço 🙏

[@viniciusaraujo718]

Excelente vídeo! 👏🏻👏🏻👏🏻

[@cunning7388]

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 =)

[@Gaberelaa]

Que vídeo excelente! Muito obrigada por compartilhar seu conhecimento :D

[@alderisegundo6373]

Cara! Seu conteúdo é muito top! Parabéns Sua didática é excelente. Fácil aprendizagem. Continue nessa mesma pegada rsrsrsrs. TMJ

[@NOMOUSE]

Conteúdo de grande qualidade!

Valeu

[@thiagocosme242]

Top demais, mestre

[@henriquemodena6826]

Se é louco o melhor!

[@isaque-fernandes1068]

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!

[@sidneyCardoso2005]

Sensacional como sempre

Muito obrigado =)

[@hendcode]

Oooh professor muito obrigado por ouvir meu pedido nos comentários dos últimos vídeos rsrsrs

Kkkk eu que agradeço

[@ederlima8621]

top aula, tirou varias duvidas

[@andresantana9148]

Que material de qualidade. Me ajudou muito.

[@henrrysantz]

Aula muito boa!!!!

[@felipesant0]

You have to do everything step by step and you will succeed. You must disconnect everything from PC protection. Thank you, Tutorials Buddy

[@sintonia0012]

Aula top

[@maiadidata]

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.

[@jezreelmoraes5864]

Muito show

Valeus =)

[@danielbressan93]

Muito bom

[@brendonalex4848]

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. :)

[@pablocardellino6547]

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.

[@pablocardellino6547]

Obs: quando digo "células" estou me referindo a elementos P que são os filhos diretos do meu grid.

[@LuisFernando-dw5do]

como ajusta o autocomplete do code pen? to tendo que digitar tudo completinho :(((((

[@emersonaraujopro]

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

[@devtiagofranca]

o flex não é tão "flex", já o grid é "bi" sacanagem kkkkk