CSS Grid - Tudo o que você precisa saber

Рет қаралды 19,754

Күн бұрын

Aprenda CSS Grid colocando a mão na massa e fazendo esses testes junto comigo.
Vamos falar sobre a maioria das propriedades, alinhamento, linhas, colunas,
responsividade e muito mais.
Sobre o flexbox - • CSS Flexbox - Tudo o q...
Capítulos:
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
Cursos de Python e JavaScript / TypeScript com desconto:
www.otaviomiranda.com.br/2017...
Twitter: / otaviomirandabr
#hashtags

Пікірлер: 66

2 жыл бұрын

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

@mininusequeci Жыл бұрын

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

Жыл бұрын

Nós que agradecemos!

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

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

@PioneiroYT 25 күн бұрын

Ótimo Otávio Miranda

@fms1 Жыл бұрын

Uma das melhores aulas na internet sobre grid. Obrigado.

@pedrowfps1538 6 ай бұрын

Nossa você explica muito bem mesmo. Ótimo professor

@raphaelalves4044 2 жыл бұрын

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

2 жыл бұрын

Que isso, eu que agradeço ☺️🙏

@lucasfranca1144 2 жыл бұрын

Agora eu aprendi!! você ensina muito bem , Otavio. Obrigado por compartilhar o seu conhecimento.

2 жыл бұрын

Que isso, é o que eu gosto de fazer, então eu que agradeço 😍

@engebras-engenhariabrasili9977 6 ай бұрын

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

@catphelios 4 ай бұрын

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

@thiagocosme242 3 ай бұрын

Top demais, mestre

@henriquemodena6826 7 ай бұрын

Se é louco o melhor!

@Gaberelaa Жыл бұрын

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

@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.

@user-ri3pz8wn9t 10 ай бұрын

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 😱

@NOMOUSE 2 жыл бұрын

Conteúdo de grande qualidade!

2 жыл бұрын

Valeu

@brendonalex4848 Жыл бұрын

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

@henrrysantz Жыл бұрын

Aula muito boa!!!!

@ricardoferreira3252 Жыл бұрын

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

@viniciusaraujo718 Жыл бұрын

Excelente vídeo! 👏🏻👏🏻👏🏻

@alderisegundo6373 Жыл бұрын

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

@sintonia0012 11 ай бұрын

Aula top

@andresantana9148 Жыл бұрын

Que material de qualidade. Me ajudou muito.

@darkshinaide Жыл бұрын

otima aula , ate eu me escrevi por causa desta aula

Жыл бұрын

Obrigado 🙏

@danielbressan93 Жыл бұрын

Muito bom

@guilhermecunha2375 Жыл бұрын

excelente aula professor

@priscillacarbonell3997 Жыл бұрын

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

@sidneyCardoso2005 2 жыл бұрын

Sensacional como sempre

2 жыл бұрын

Muito obrigado =)

@miltontsilva Жыл бұрын

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

@jackfelinto9029 Жыл бұрын

Vlw mestre por compartilhar seus conhecimentos, excelente aula.

@diegosantosmoto Жыл бұрын

Melhor aula de grid! Excelente didática

Жыл бұрын

Muito obrigado ☺️

@ederlima8621 Жыл бұрын

top aula, tirou varias duvidas

@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

@ClashRoyale-pt9zj 2 жыл бұрын

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

2 жыл бұрын

Podexa, obrigado 🙏

@jezreelmoraes5864 2 жыл бұрын

Muito show

2 жыл бұрын

Valeus =)

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

@pablocardellino6547 2 жыл бұрын

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!

2 жыл бұрын

Que massa, muito obrigado Pablo 🥰

@rodrigovieira5204 Жыл бұрын

ótima explicação professor, obrigado !!

Жыл бұрын

Eu que agradeço 🙏

@christophcury940 Жыл бұрын

Grato pela aula, boa didática. Gostando do conteúdo do seu canal. 🙏

11 ай бұрын

Desculpa a demora, eu realmente não tinha visto seu comentário. Agradeço demais =)

@app2028 Жыл бұрын

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

Жыл бұрын

Fico feliz em saber

@felipesant0 Жыл бұрын

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

@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.

@hendcode 2 жыл бұрын

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

2 жыл бұрын

Kkkk eu que agradeço

@cunning7388 2 жыл бұрын

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!

2 жыл бұрын

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

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

@LuisFernando-dw5do 8 ай бұрын

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

@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.

@reiemerson Жыл бұрын

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