CSS GRID na PRÁTICA - Tutorial Completo

Поділитися
Вставка
  • Опубліковано 11 гру 2024

КОМЕНТАРІ • 129

  • @kipperdev
    @kipperdev  Рік тому +6

    Se você quer aprender mais sobre CSS, React JS, React Native, Node JS e muito mais então aproveita esse desconto do Rocketseat One pra ter conteúdo de MUITA qualidade e extremamente bem estruturado
    tr.ee/kipperdev-desconto-rocketseat-one
    🎁 USE O CUPOM: KIPPERDEV

  • @matheusrocha7551
    @matheusrocha7551 Рік тому +6

    Excelente vídeo! Esse mesmo tópico "Display: Grid" está disponível do curso em que PAGUEI para aprender. Mas tu explica 1000x melhor! Parabéns!!!

    • @kipperdev
      @kipperdev  Рік тому

      Muito obrigadaaa, Matheus 💜
      Que bom que ajudou você

  • @matheuslouzada1427
    @matheuslouzada1427 8 місяців тому +1

    7 meses depois, eu voltei aqui e esse vídeo me salvou muito!! Estava sofrendo no CSS de um projeto aqui hahaha VLW FE!!!!

    • @kipperdev
      @kipperdev  8 місяців тому +1

      Hahahah boaaa
      De nada 💜

  • @J_oao_rocha
    @J_oao_rocha Рік тому +1

    moça , gostei muito da didatica, estou fazendo um curso de front end , bem famoso ate, porem ele nao sabe explicar igual á vc, agora sim eu consegui entender o grid, muito obrigado, ja vou maratonar seu canal.!!!!!

    • @kipperdev
      @kipperdev  Рік тому

      Muito obrigadaa, @J_oao_rocha. Muito bom saber que o meu jeito de explicar te ajudou .💜

  • @Matsumoto_Hiroyuki
    @Matsumoto_Hiroyuki Рік тому +4

    Olá Fernanda, tudo bem?
    Gostaria de deixar meus agradecimentos, você tem sido minha referência quando o assunto é front. Sou DEV (backend) a uns 10 anos + e só agora estou estudando front a fundo, seus vídeos me ajudam muito! É o conteúdo mais atualizado e prático que encontrei até hoje!
    Sucesso guria!

    • @kipperdev
      @kipperdev  Рік тому

      Que honra poder ajudar alguém com tanta experiência!
      Muito obrigado pela confiança, Nilton, fico muito feliz que o conteúdo esteja te ajudando 💜

  • @clipesdevalorant-pksant0s350
    @clipesdevalorant-pksant0s350 Рік тому +1

    fiz alguns cursos sobre o display grid e me deu dor de cabeça! é em 25min vc conseguiu fazer o que os cursos em horas não fizeram! Muito obrigado, ajudou demais! ganhou um novo inscrito.

    • @kipperdev
      @kipperdev  Рік тому

      Que bom que ajudou você 💜
      Muito obrigada pela confiança

  • @fernandadias6625
    @fernandadias6625 Рік тому +1

    sério explica muito bem, estou assistido todos os vídeos e programando junto

    • @kipperdev
      @kipperdev  Рік тому

      Boaaa, que show Fe! Fico muito feliz que vc esteja gostando 💜

  • @regianemelo1995
    @regianemelo1995 2 місяці тому

    Você explica muito bem!! Tava quebrando minha cabeça com um projeto e agora sei como fazer.
    Obrigadaaaaa

  • @thiagoalvesone9885
    @thiagoalvesone9885 7 місяців тому +1

    Parabéns pela didática. Uma aula pontual e precisa.

  • @uirleandrosantos5095
    @uirleandrosantos5095 Рік тому

    Meu Deus do céu, você é minha heroína, eu tava travado em um bug, com esse video foi fácil fácil de resolver.

  • @fearmamba
    @fearmamba Рік тому +20

    Você é sensacional, obrigado por contribuir tanto com a comunidade

    • @kipperdev
      @kipperdev  Рік тому +1

      Obrigada!! Fico feliz em ajudar nossa comunidade 💜

  • @pietrorodrigues3008
    @pietrorodrigues3008 Рік тому +5

    Ótimo vídeo, muito didático, curti muito para dar uma relembrada nesses conceitos básicos de CSS

    • @kipperdev
      @kipperdev  Рік тому +1

      Muito obrigadaa, @pietrorodrigues3008 💜

    • @chriis_nt
      @chriis_nt Рік тому

      isso é basico?! AAAAAAAAAAAAAAAAAAAAA TO LASCADO

  • @danielleal4132
    @danielleal4132 Рік тому

    Ajudou de mais tava vendo no curso entendi nada, vendo seu vídeo esclareceu um monte de coisa, obrigado

  • @mat5616
    @mat5616 Рік тому +1

    Obrigado, Fernanda!!!
    Sua explicação é super didática e simples :)

  • @guilherme7556
    @guilherme7556 4 місяці тому

    felca programdor vc me salvou muito papo reto te amo s2

  • @marcelemonteiro1519
    @marcelemonteiro1519 Рік тому +1

    Seus conteúdos têm agregado muito nos meus estudos, sua didática funciona muito pra mim, muito obrigada 🥰

    • @kipperdev
      @kipperdev  Рік тому +1

      Que bomm, @marcelemonteiro1519
      Fico muito feliz que esteja ajudando você 💜

  • @ClipZone-cortes
    @ClipZone-cortes Рік тому

    MUY CRANIO estou impressionado com o jeito q ela ensina MUY CRANIO

  • @alexandrolimamangabeira6264
    @alexandrolimamangabeira6264 4 місяці тому

    Aula muito massa. Didática incrível.

  • @dj92consultorias43
    @dj92consultorias43 11 місяців тому

    Macetou um módulo do meu curso em 25min na minha mente, só que melhor. Obrigado

  • @allanSouzaBr99
    @allanSouzaBr99 Рік тому +2

    Caraca esse video chegou na hora perfeita dos meus estudos, muito obrigado!! 👏🏽

  • @leonardofirmodamota6081
    @leonardofirmodamota6081 Рік тому +1

    As vezes eu acho que você tá lendo minha mente, penso em estudar alguma coisa coisa ou fazer algum projeto para aprender algo e você no mesmo dia faz o video com o conteúdo kk, só tenho a te agradecer estou aprendendo mt com seu canal mt obrigado \o

    • @kipperdev
      @kipperdev  Рік тому

      ahahahaha nossa que coindência! Fico feliz de estar de ajudando com os videos Leo! Bons estudos pra você 💜

  • @isabellealvesdutra5521
    @isabellealvesdutra5521 2 місяці тому

    Muito bom! Fiquei esperando falar sobre a propriedade auto no lugar do tamanho. Mas vou testando pelo meu código, valeu.

  • @babadosnews
    @babadosnews Рік тому

    te amo! comecei programação por conta de você

  • @charlescampista9384
    @charlescampista9384 Рік тому

    Muito bem moça! Simples e direto ao ponto.

  • @Jhong205
    @Jhong205 11 місяців тому

    Hoje sou estudante de front-end e estava fazendo um cardapio e seu video me ajudou mt vey 😘😘

    • @kipperdev
      @kipperdev  11 місяців тому +1

      Que bom Jhon, fico feliz que ajudou! 💜

  • @costaelson1982
    @costaelson1982 Рік тому +1

    Gostei demais do conteúdo. Show de bola !!

  • @luizgmachado
    @luizgmachado Рік тому +2

    Muito top, conteúdo incrível!!
    Sou aluno da Rocketseat e sou fã!! 💜

    • @kipperdev
      @kipperdev  Рік тому +1

      Obrigada Luiz, fico feliz que gostou!! E que massa, sou ex-aluna da Rocket tambémm 💜

  • @xpeugames
    @xpeugames Рік тому

    Esse seu ótimo vídeo, salvou aqui! Muito obrigado, pequena! ♥ Fortaleza-CE ♥

    • @kipperdev
      @kipperdev  Рік тому

      Que bom que ajudou você, @xpeugames 💜

  • @eduardocarlos5716
    @eduardocarlos5716 2 місяці тому

    Ótima aula! Obrigado

  • @estefanosantosbarros5798
    @estefanosantosbarros5798 Рік тому

    Tô simplesmente zerando todos os vídeos. Obrigado por ajudar um Dev iniciante!

    • @kipperdev
      @kipperdev  Рік тому

      hhahaha fico feliz que os vídeos estão ajudando Estano 💜

  • @joseniltonsilva730
    @joseniltonsilva730 Рік тому

    Excelente didática😊. Parabéns👏

  • @MarioEstimaCoder
    @MarioEstimaCoder 3 місяці тому

    a melhor de todas.

  • @felipevieira5233
    @felipevieira5233 Рік тому +1

    Ótimo conteúdo, muito bem explicado.
    Espero que tenha mais conteúdos assim

  • @Edyskateice
    @Edyskateice Рік тому

    muito bom esplicação e muito boa parabens.

  • @MiguelGrigatoGarbo
    @MiguelGrigatoGarbo Місяць тому

    porrra mt foda, me acostumei com o display flex mas vou usar esse tambem

  • @thairincksilva
    @thairincksilva Рік тому

    sua didática é ótima Fer, tamo junto 👊👊

    • @kipperdev
      @kipperdev  Рік тому +1

      Obrigadaa! Tamo junto 😊

  • @heldernf
    @heldernf Рік тому +4

    Uma dúvida sobre o auto-fiill, vamos considerar que você botou um (auto-fill, 100px) e dai você foi redimensionando a tela até chega em 1920(full screen), ou seja, agora você tem 19 colunas, não teria uma forma de travar o auto-fill quando ele chegar em tal tamanho, e além disso alinha esse sempre ao meio por exemplo, pois no caso que citei, teremos 19 colunas, e os itens de cada linha e coluna estão todos colados a esquerda mesmo tendo uma sobre enorme a direita deles, não teria como colocar pra eles sempre ficarem ao meio ou ao final por exemplo?

    • @silassousa7316
      @silassousa7316 11 місяців тому

      Acho que dá pra configurar isso com o media query

    • @zuromato1
      @zuromato1 Місяць тому

      Tu tem algumas saídas nisso, tu pode usar o media quero pra configurar suas persolazacoes utilizando N o auto-fill mas sim o grid área, outra solução seria vc aumentar o tamanho das colunas dependendo do meia query ou usar o auto-fill com a propriedade 1fr q vai da fração da tela e N dr um número fixo, mas vai depender do seu contexto saber quais opções podem ser melhor pra tu

  • @guibobodacorte
    @guibobodacorte Рік тому

    Maravilhosa🎉❤ Obrigado pelo conteúdo. 😍😊

  • @dougyoshii
    @dougyoshii Рік тому

    Aê fernanda, parabéns pelo conteúdo.

  • @MarceloKade
    @MarceloKade Рік тому

    Melhor vídeo sobre css grid

  • @Deivisondc
    @Deivisondc Рік тому

    Excelente vídeo Fernanda.. Eu estou desenvolvendo um site especificamente pra explicar flexbox e grid de um jeito facil e prático (especialmente para os meus amigos backend que pedem ajuda pra alinhar algo na tela kkk.. eu nao julgo, fui backend por mt tempo e fazia a msm coisa kkkkk)

    • @kipperdev
      @kipperdev  Рік тому

      Obrigada Deivi!!
      ahahah que massa, depois me manda o link do seu projeto! Conheço umas pessoas que gostariam de usá-lo também :)

  • @BADBOY-zy7bk
    @BADBOY-zy7bk Рік тому

    você é zika!!! uma sugestão, faz do flex box tambem seria otimo!

    • @kipperdev
      @kipperdev  Рік тому +1

      Obrigadaa! Sim, logo tem vídeo de flex box também 😊

  • @IsaacCastroOficial
    @IsaacCastroOficial 6 місяців тому

    Gostei Fernanda, esta até procurando outra coisa, mas gostei do vídeo.

  • @helpsosbr
    @helpsosbr Місяць тому

    amei muito obg 😍

  • @igor_fortunato
    @igor_fortunato Рік тому

    Fantastico sua explicação e se vc ter curso seu manda o link.

  • @ciceroi1
    @ciceroi1 Рік тому

    Boa, ja deu ideia de praticar no portfolio!

  • @oficialoraculo
    @oficialoraculo Рік тому

    Estou criando meu portfólio e utilizei esse video como referência. Ajudou muito obrigado.
    Os dados de cada projeto eu montei um json server com os dados e imagens e chamei essa api no meu angular, as informações de textos vem certinho mas as imagens não. O que pode ser?

  • @hardpuppy25
    @hardpuppy25 Рік тому

    boooa :) Você é 10 Fernanda, sucesso !!!

    • @kipperdev
      @kipperdev  Рік тому

      Muito obrigadaa, @hardpuppy25 💜
      Successo pra você também!

  • @machinzero2139
    @machinzero2139 Рік тому

    Muito didática e excelente como sempre. Uma sugestão que seria legal, seria um vídeo ensinando na prática uso de context com o reducer em React, é uma coisa que assusta um pouco o pessoal kkk

    • @kipperdev
      @kipperdev  Рік тому +1

      Obrigada Ryu!! E obrigada pela sugestão, logo terá uma live sobre esse assunto 😊

  • @developerlage
    @developerlage Рік тому

    Hj é usado muito o grid? Estou estudando somente o flex e entendendo bem. Em proporção de uso o que seria mais usado?

  • @angellLLITE
    @angellLLITE Рік тому

    Muito obrigado Felca

  • @williamscapini244
    @williamscapini244 Рік тому

    Bacana o Grid trabalha com duas dimensão colunas e linhas.

  • @geandersonoliveira494
    @geandersonoliveira494 28 днів тому

    Muito bom fernanda

  • @PatrickDTech
    @PatrickDTech Рік тому

    Excelente vídeo!!!
    obrigado pela aula.

  • @carollicciardi_
    @carollicciardi_ Місяць тому

    amei diva, ajudou

    • @kipperdev
      @kipperdev  Місяць тому

      Que bom que ajudouuu Carol!

  • @mundocolorido613
    @mundocolorido613 7 місяців тому

    Top , ótimo conteúdo

  • @ronaldonascimento9676
    @ronaldonascimento9676 Рік тому

    Ficou top demais !! Faz também de Flexbox.

    • @kipperdev
      @kipperdev  Рік тому

      Obrigada Ronaldo!! Simm, logo terá vídeo de flexbox também :)

  • @obitadraw4127
    @obitadraw4127 Рік тому

    Ótimo vídeo Fe vc é demais e seu conteúdo é top

    • @kipperdev
      @kipperdev  Рік тому

      Obrigada Obita!! Que bom que gostou 💜

  • @wallacesilva6087
    @wallacesilva6087 Рік тому

    Excelente vídeo Fernanda !

  • @hoff_mann
    @hoff_mann Рік тому

    obrigado pelo conteudo, nota 10

  • @gabrielrodrigodias6210
    @gabrielrodrigodias6210 Рік тому

    Você é braba demais, obrigado

  • @lay3437
    @lay3437 Рік тому

    Será que existe alguma extensão que deixa o nome das funções/variáveis dentro de uma caixinha colorida, igual as cores

  • @zor0caolh0
    @zor0caolh0 Рік тому

    ajudou mt moça, obgd

  • @clubefortuna
    @clubefortuna 10 місяців тому

    Muito bomm!

  • @celuw
    @celuw Рік тому

    me ajudou muitooooo VLW

  • @jeremiasverissimogomes8521
    @jeremiasverissimogomes8521 Рік тому

    Arrasa!

  • @julyannelima
    @julyannelima 7 місяців тому

    perfeitaaaaa

  • @guastivlogs7203
    @guastivlogs7203 Рік тому

    Qual é esse tema que você usa no VS, Fernanda?

    • @kipperdev
      @kipperdev  Рік тому +1

      Eu uso o Emerald, versão Dark!

  • @kevinmendes85
    @kevinmendes85 Рік тому

    Ótimo vídeo como sempre, oq me pega é só esse sotaque paulista do MÂS kkkk

  • @hugocosta3551
    @hugocosta3551 Рік тому

    Olá, abraço de Portugal. Gosto muito dos teus videos e não custumo comentar mas fiqui com uma dúvida: porque usas o justify-items e não o justifty-content?

  • @LucasSantosfilms
    @LucasSantosfilms 4 місяці тому +1

    A Fer é o meu ponto fraco, mina gata e inteligente, como é difícil achar uma pessoa assim!

    • @EndisuKKJJ
      @EndisuKKJJ 2 місяці тому +1

      Tá atacante hein KKKKKKKKKJKJJJJJJKKKKJJKKKK

    • @LucasSantosfilms
      @LucasSantosfilms 2 місяці тому

      @@EndisuKKJJ falei mentira? Kkkkkk claro q não

  • @danilocampos1337
    @danilocampos1337 Місяць тому

    eu gostaria de ter auxilio online. Como eu faço???

  • @timoteobega
    @timoteobega 3 місяці тому

    Show

  • @luanaSantos-fb5kq
    @luanaSantos-fb5kq 8 місяців тому

    se tivesse uma cor no fundodo container, dava pra ver melhor a movimentação das caixinhas

  •  Рік тому

    Top D+

  • @Martinez419
    @Martinez419 Рік тому

    Você é f*da! Com o perdão da palavra

    • @kipperdev
      @kipperdev  Рік тому

      ahahaha muito obrigada!! 💜

  • @joaovitorpinheirodossantos2502

    IMPORTANTE

  • @pereti8639
    @pereti8639 Рік тому

    q video bom

    • @kipperdev
      @kipperdev  Рік тому +1

      Muito obrigadaa, @pereri8639 💜
      Fico feliz que tenha gostado

  • @CilasMacedo-w6s
    @CilasMacedo-w6s 2 місяці тому

    Mano, vídeo bom demais. Mas tô até agora sem entender a lógica do que acontece no minuto 5:24 :(

  • @hudsonsouza6680
    @hudsonsouza6680 Рік тому

    Ei.. tudo bom?
    Tava querendo sair do emprego p trabalhar na área. Poderia me indicar pra uma vaga de estagiário?
    Tem tempo que quero entrar na área e não consigo.

    • @StefanoCibi
      @StefanoCibi Рік тому

      Não é assim amigo.
      Voce precisa saber fazer algo e estar cursando faculdade para conseguir acesso a um estágio.

  • @gersinwq
    @gersinwq Рік тому

    Fernanda, qual o nome desse tema q você sempre usa? Acho daora, mas não acho ele

  • @devarsh5317
    @devarsh5317 Рік тому

    tema pls

  • @TrechosdeFilmes89
    @TrechosdeFilmes89 Рік тому

    Fernanda, vamos levar um choque pra eu receber todos os seus conhecimentos ?

  • @arozendojr
    @arozendojr Рік тому

    bom

  • @iarley823
    @iarley823 Рік тому

    oi fe

  • @nivaldomonteiro3694
    @nivaldomonteiro3694 10 місяців тому

    Ela explica tão bem, mas eu sou tão burro que fui tentar reproduzir e n saiu foi nada.

  • @aniworld4963
    @aniworld4963 Рік тому

    Bom conteúdo mais nao tao bem explicado, para alguém q ja percebe do assunto, acho q adorou mais para alguém como eu q esta iniciando ja a um bom tempo mesmo, achei q vc nao foi tão clara durante as explicações, tem partes q nao percebi o assunto. Resumindo: pude perceber a essência do display grid mais tem partes q nao pude perceber pq sao assim ou como realmente utiliza-las e isso q acho q é o mais importante, ou seja, passa a ser mais clara e passa a explicar um pouco mais devagar e nao tao rápido.
    Apenas o q acho, sem querer faltar o respeito...

    • @kipperdev
      @kipperdev  Рік тому +1

      Obrigada pelo comentário, vou tentar melhorar minhas explicações para os próximos! O objetivo do vídeo foi explicar na prática como utilizar o display grid, ensinando seus atributos e a forma como ele funciona.... não pensei em explicar para quais cenários ele pode ser usado, vou cuidar para os próximos :)

  • @jubszxz
    @jubszxz Рік тому

    muito bom

  • @yblindz
    @yblindz 11 місяців тому

    Bom video

  • @Garoa06
    @Garoa06 Рік тому

    eu to travado tem dias tentando fazer um negocio assim mas parece impossivel, sempre usei flex box mas nem flex nem grid nem reza permite
    /---------------------------/---------------/
    / / 30%/30% /
    / 70%/70% /---------------/
    /-----------------------/ /
    / 70%/30% / 30%/70% /
    /---------------------/---------------/