Simplifique e flexibilize seu CSS Grid! Nesta aula teórica (Parte 4), Gustavo Guanabara ensina a usar a função repeat() para reduzir a repetição nas definições de colunas e linhas do grid. Descubra também a poderosa unidade fr (fração), ideal para criar layouts proporcionais e flexíveis. Aprenda como a unidade fr distribui o espaço disponível e como combiná-la com outras unidades como pixels (px) e porcentagem (%) para criar grids complexos de forma eficiente.
Assuntos Abordados (Capítulos):
00:00 - Introdução: Simplificando declarações com funções e unidades.
00:35 - Contexto: Parte 4 teórica das propriedades de contêiner grid.
02:15 - Revisão Geral: Propriedades e shorthands vistos anteriormente.
03:50 - Foco da Aula: Função repeat() e unidade fr (fração).
04:37 - Função repeat(): Simplificando valores repetidos (ex: auto auto auto).
05:03 - Aplicando repeat(): Exemplos em grid-template-columns e rows.
05:21 - Combinando repeat() com Shorthands: grid-template mais enxuto.
06:04 - Introdução à Unidade fr: Frações para divisão de espaço.
06:28 - Exemplo com fr: 1fr 1fr 1fr vs auto auto auto.
08:02 - Como fr Funciona: Soma das frações divide o espaço total.
09:09 - auto vs fr: Diferenças e recomendação de uso (fr).
09:53 - Layout Assimétrico com fr: Exemplo 1fr 2fr 1fr.
10:40 - Cálculo com fr (Exemplo 1fr 2fr 1fr): Dividindo o espaço disponível.
13:04 - Misturando Unidades: px, % e fr na mesma declaração.
13:47 - Cálculo com Unidades Mistas: Fixas e % primeiro, fr no restante.
16:17 - Simplificando Unidades Mistas: Usando repeat() com fr.
18:08 - Próxima Aula: Mão na Massa aplicando repeat() e fr
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 #C28A08