Summary
Keywords
Full Transcript
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
