Continue explorando o CSS Grid Layout! Nesta aula teórica (Parte 3), Gustavo Guanabara aborda o Grid Implícito, explicando como configurar linhas e colunas adicionadas automaticamente com grid-auto-rows e grid-auto-columns. Descubra também como simplificar seu código CSS usando as propriedades shorthand: place-items (para align-items e justify-items), place-content (para align-content e justify-content) e grid-template (para grid-template-rows e grid-template-columns). Deixe seu CSS mais limpo e eficiente!
Assuntos Abordados (Capítulos):
00:00 - Introdução: Propriedades de Contêiner Grid - Parte 3.
00:37 - Metodologia: Aulas teóricas antes do próximo Mão na Massa.
02:13 - Revisão Essencial: Propriedades vistas nas aulas anteriores.
03:26 - Novas Propriedades: Foco em grid-auto e shorthands.
04:15 - grid-auto-rows e grid-auto-columns: Controlando o grid implícito.
05:03 - Exemplo Base: Grid 3x3 com itens de A a I.
06:03 - Grid Explícito vs. Implícito: O que acontece com itens extras (J)?.
07:10 - Problema Comum: Itens implícitos com tamanho incorreto.
08:12 - Solução: Usando grid-auto-rows para definir altura das linhas implícitas.
09:06 - grid-auto-columns: Definindo largura das colunas implícitas.
11:00 - Propriedades Shorthand: Simplificando o CSS Grid.
11:28 - Revisão Alinhamentos: align/justify para items e content.
12:45 - Shorthand place-items: Combinando align-items e justify-items.
12:53 - Shorthand place-content: Combinando align-content e justify-content.
13:53 - Shorthand grid-template: Combinando grid-template-rows e columns
14:43 - Resultado: Redução significativa de linhas de código (7 para 4).
15:50 - Próxima Aula: Mais teoria antes do próximo exercício prático.
16:33 - Dica de Estudo: Anotar é fundamental para fixar tantas propriedades.
O Curso de HTML5 e CSS3 vai ensinar a criar sites usando a linguagem de marcação hipertexto (HTML) e folhas de estilo em cascata (CSS), todas em suas versões mais recentes. Neste curso, o Professor Gustavo Guanabara criou um conjunto de vídeos, exercícios, desafios e um material de apoio em forma de e-book com 30 capítulos ao todo.
Acesse o material de apoio em PDF:
== GitHub: https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
Receba notificações de novos vídeos:
== Canal no Telegram: https://t.me/cursoemvideo
Acompanhe todos os vídeos do Módulo 1 do Curso de HTML5 e CSS3:
== Módulo 01: https://www.youtube.com/playlist?list=PLHz_AreHm4dkZ9-atkcmcBaMZdmLHft8n
Acompanhe todos os vídeos do Módulo 2 do Curso de HTML5 e CSS3:
== Módulo 02: https://youtube.com/playlist?list=PLHz_AreHm4dlUpEXkY1AyVLQGcpSgVF8s
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 03: https://www.youtube.com/playlist?list=PLHz_AreHm4dmcAviDwiGgHbeEJToxbOpZ
Acompanhe todos os vídeos do Módulo 3 do Curso de HTML5 e CSS3:
== Módulo 04: https://www.youtube.com/playlist?list=PLHz_AreHm4dkcVCk2Bn_fdVQ81Fkrh6WT
Consiga certificados fazendo o curso diretamente pelo site oficial do projeto:
== Site: https://www.cursoemvideo.com
Torne-se apoiador do projeto:
== Acesse: https://www.cursoemvideo.com/apoie
Siga-nos nas redes sociais:
== Gustavo Guanabara no Instagram: https://www.instagram.com/gustavoguanabara
== Curso em Vídeo no Instagram: https://www.instagram.com/cursoemvideo
== Hostnet no Instagram: https://www.instagram.com/hostnetbr
== Estudonauta no Instagram: https://www.instagram.com/estudonauta
Conheça os patrocinadores desse curso:
== HOSTNET: https://www.hostnet.com/cursoemvideo
== RECODE: https://www.recode.org.br/novidades
== ESTUDONAUTA: https://www.estudonauta.com/cursoemvideo
#cursohtml5css3 #modulo05 #C28A07