DISPLAY GRID: Guia completo para Iniciantes em CSS

Olá, pessoal!

O CSS Grid é uma poderosa ferramenta que permite criar layouts complexos e responsivos para suas páginas da web com facilidade. Neste vídeo, vamos explorar todos os aspectos do CSS Grid, desde os conceitos básicos até técnicas avançadas.

Aprenda a usar propriedades como: "display: grid", "grid-template-columns", "grid-template-rows", "gap", "justify-items", e "align-items".

Documentação do CSS Grid para aprender mais:

Redes sociais:
Instagram: @dev_em_dev

Capítulos:
00:00 - Introdução
01:00 - Container e Item
04:00 - grid-template-columns
05:47 - grid-template-rows
06:35 - FR
08:15 - repeat()
09:30 - minmax()
11:00 - gap
12:45 - justify-items
13:23 - align-items
14:18 - justify-content
14:50 - align-content
15:38 - place-items
16:04 - grid-template-areas
20:10 - grid-auto-rows
20:56 - grid-column
22:42 - grid-row
23:10 - align-self e justify-self

[clemertoigo]

Ótima didática, parabéns! Consegui aprender em 25 minutos o que os professores não me ensinarem em uma aula de quase duas horas, como q pode isso gente.

[paulorogeriocatarin]

Oi Lari tudo bem...
Só gostaria de dizer que seus conteúdos tem me ajudado muito a desenvolver meus projetos... Obrigado

[TheWizzaay]

Obrigado por essa aula finalmente consegui entender sobre grid

[mr.punchy]

Deu uma baita aula Larissa, isso é conteúdo premium. Você vai longe!

[robinsoncarrazzoni]

Ensinou no vídeo o que meu professor n ensinou no semestre todo ! Obrigado pelo conteúdo.

[joaopedrosantiago]

Tá me ajudando bastante seu canal. Valeu por repassar conhecimento!

[williamsnts]

Cria um quiz de perguntas com ranking. Por exemplo: Um quiz de 20 perguntas, cada pergunta com três alternativas de resposta em botões. Ao finalizar as perguntas, mostra a posição do usuário no ranking e os 10 primeiros colocados. Cria tipo um sistema de login para o usuário criar seu nick para acessar o quiz.

[raisouzaart]

Exemplo prático é da hora! Faça por favor

[rodvehman]

Conhece bastante do assunto! Ótimo vídeo!

[heliocentrico]

Muito obrigado pelo vídeo! Sua didática é excelente.

E gostaria muito de ver essa aula prática.

[luismendes]

Por mais conteúdos assim, me ajudou muito, parabéns pelo canal 🙂👏🏻

[franklinfernandes]

caraca seu canal cresceu fico feliz por você. conheci seu canal em 2020 estudando programação kkkk e, a propóstio, otimo video ! S2

[neysantos]

Ótimo vídeo, aguardo exemplo prático... E aliás mandou muito bem com
, parece conhecer bem o assunto

[febatera]

Excelente video. Tenho um site pra tornar responsivo porém ao utilizar o bootstrap, varias classes já existentes "entortam" tudo. Com o grid acredito que dará menos trabalho com bons resultados. Valew d+

[GabrielandreR]

muito top, no próximo tenta fazer sobre bootstrap e um exemplo de aplicação.

[PauloJsx]

Seria interessante ensinar em Tailwind agora, lá o Grid é um pouquinho diferente. Facilita um pouco ao usar template string em uma renderização dinâmica também

[cassio_almeida]

Como colocasse esse ícone ✨ no editor? é show de bola

[Lucas.bg]

Ah! Não é uma IA por trás dos vídeos como eu suspeitava, haha!