CSS Grid - Crie Layouts Responsivos

Подписаться 9 тыс.

Просмотров 12 тыс.

50% 1

Neste vídeo mostro na prática como utilizar todas as propriedades que englobam o CSS Grid. Isso vai facilitar muito sua vida na hora de criar layouts responsivos.
Baixe o mapa mental
🔴 layercomp.net/css-grid-tudo-o...
✅ VEJA TAMBÉM
▸ CSS Flexbox - Aula Completa: • FLEXBOX CSS - TUDO O Q...
▸ 5 cursos grátis de programação: • 5 Cursos GRÁTIS de Pro...
▸ Aprender Front-end em 3 meses, é possível?: • Aprender FRONTEND em 3...
✅ INSCREVA-SE NO NOSSO CANAL!
youtube.com.br/c/layercomp?sub...
✅ SIGA-NOS NAS REDES SOCIAIS!
layercomp.net/links
🔴 MEU SETUP
layercomp.net/setup
00:00 Instruções
00:25 O que é o CSS Grid?
00:47 Mapa mental
01:34 Como CSS Grid se divide
02:10 display grid e inline-grid
03:36 grid-template-columns
05:00 fr
06:22 repeat()
07:55 minmax()
09:27 auto-fit()
11:19 grid-template-rows
12:58 column-gap e row-gap
13:34 gap
14:07 grid-auto-columns e grid-auto-flow
17:28 grid-auto-rows
18:11 grid
18:57 justify-content e align-content
25:34 justify-items e align-items
27:27 grid-template-areas
30:07 grid-area
31:13 grid-template
32:15 grid-column
33:38 grid-row
34:35 justify-self e align-self
#css #grid

Опубликовано:

17 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 58

@LayerComp 2 года назад

✅ VEJA TAMBÉM ▸ CSS Flexbox - Aula Completa: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WBMN-PcwqG8.html ▸ 5 cursos grátis de programação: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XF82aXhdLXc.html ▸ Aprender Front-end em 3 meses, é possível?: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FxB9UUolXs8.html

@DevSamir-je7md 9 месяцев назад

Como esse canal só tem 8K??

@rasec1xD 2 года назад

Muito bom cara. Não desanime com poucas visualizações do RU-vid... é uma jornada longa, conheço alguns que levaram anos para serem "notados". Mas não fica parado, tenta se aproximar de uma empresa ou outro youtuber que vá te dar visibilidade, sozinho pode demandar um tempo expressivo. Em relação ao conteúdo, agregou bastante!

@LayerComp 2 года назад

Opa, obrigado Paulo! Pode deixar kkk, vou continuar postando aqui sempre que tiver tempo disponível. Fico feliz que tenha te ajudado.

@felipemiguel9774 Год назад

Está de parabéns o meu vídeo didático 🎉🎉

@harrisonsax 8 месяцев назад

O mind map é o grande diferencial para explicar as funcionalidades. Parabéns por perceber e estruturar sua aula baseada nele. Até agora, um dos melhores vídeos explicativos sobre CSS grid que assisti no RU-vid mesmo ao comparar com vídeos gringos. Excelente.

@bate-papojovemon4747 2 года назад

Parabéns! Conteúdo de muita qualidade!

@brennocarvalho842 2 года назад

Mais uma vez, parabéns pela excelente aula, sua didática é show !!

@PaulaFlavia1 Год назад

Te achei agora e já gostei, muito obrigada pela super aula.

@jhonatanportarriux5239 Год назад

Que vídeo sensacional!! Tirou todas minhas dúvidas

@geodidio 11 месяцев назад

otimo video. keep up the good work.

@guilhermelautertdelima730 Год назад

Obrigado por seu conteúdo irmão, me ajudou muito!

@fxengenharia4897 Год назад

Muito bom o vídeos, parabéns. Aprendi bastante

@davisonsantos2945 Год назад

Valeu!

@dinodrivesclub4282 6 месяцев назад

Parabéns!!

@Rafael11piraju Год назад

Assistindo em #2023, muito bom o seu conteúdo

@MarcosGamerFull Год назад

Vídeo aula espetacular! Parabéns! Ganhou mais um inscrito.

@rmauto6273 Год назад

Valeu irmao.. muito boa tua didatica. Facil de entender. Abraco

@moni7211 2 года назад

parece ser complicado pois tem muita coisa que parece que faz a mesma coisa hahaha, mas é isso bora praticar ! obrigado pelo conteúdo gratuito e de ótima qualidade 😄

@dcassis Год назад

Esse é o melhor video sobre grid que eu assisti. Muito obrigado, seguindo o canal já!

@rennanmacarini6979 2 года назад

Show, parabéns pelo video ❤

@LayerComp 2 года назад

Valeuu Rennan 🙂

@Lima-yd3cm 2 года назад

Muito bom 😃

@LayerComp 2 года назад

Valeuu mano! :)

@othiago7 2 года назад

Show de bola.. Parabéns !

@LayerComp 2 года назад

Obrigado Thiago, tmj 👊🏻

@xxGiL122xx 2 года назад

Cara, simplesmente sensacional o seu conteúdo! didática incrível ! Parabéns e mtu mas mtu obrigado!

@LayerComp 2 года назад

Pow, fico feliz que tenha te ajudado, eu que agradeço! 🙂

@pedrogois2832 2 года назад

Cara, agradeço infinitamente a você e as suas aulas que me fizeram entender cssgrid e flex box. Você é show!!

@LayerComp 2 года назад

Pow, muito obrigado pelo comentário Pedro. Fico muito feliz que tenha te ajudado de alguma forma, tmj 👊🏻

@BrunoAlves-vl2uc 2 года назад

Essa didática de usar o mind map para explicar funciona MUITO pra mim, obrigado cara! Vou ver e rever esse vídeo umas 200x kkkkkk.

@LayerComp 2 года назад

kkk valeu Bruno! Fico feliz que tenha gostado :)

@robertoliveira5852 2 года назад

Você é excelente amigo

@LayerComp 2 года назад

Valeu Robert, tmj :)

@nameless4086 2 года назад

Parabéns pelo conteúdo, colega! Vou até printar que me inscrevi nesse canal quando tinha 2mil inscritos kkkk sucesso!

@LayerComp 2 года назад

Kkkk show mano! Obrigado pelo feedback e pela confiança 🙂

@mateusalves6987 Год назад

Muito boa a didática com mind maps!!!! Alias, qual site vc utilizou para faze-los?

@fom3detecnologia 2 года назад

Cara, você deu uma explicação sensacional! Começando a curtir bastante a Grid no CSS, poderia fazer um vídeo falando sobre responsividade? é uma coisa que sinto muita dificuldade em meus projetos. Deus abençoe e sucesso no canal!

@LayerComp Год назад

Valeu irmão! Eu fiz um vídeo sobre a grid do Bootstrap onde falo um pouco sobre responsividade, mas vou ver se faço um vídeo específico para isso, explicando os media query e tudo mais. :)

@laluchademeche 2 года назад

Gracias por los aportes, que programa usas para los mapas mentales

@LayerComp 2 года назад

Obrigado pelo comentário, John! Eu uso o XMind 🙂

@cristianosoftwareengineer 6 месяцев назад

Bom dia tudo bem, pelo que entendi o Grid já é responsivo, se a pessoa abrir o site no celular, no tablet, no notebook, no computador ou em uma televisão o site vai ajustar automaticamente ??? Ou vai precisar mais alguma coisa nos comandos ??

@GustavoFilgueiras 2 года назад

Fale mestre bom dia ! Excelente video, parabéns! Tah ai um assunto que bato cabeça, front-end heheheheh Tenho uma dúvida, as 22:08 min do vídeo, o conteúdo vaza pra baixo do container, não deveria ficar preso dentro? como se fosse uma parede?

@LayerComp 2 года назад

Opa, bom dia mano! Obrigado pelo comentário. 😃 Então, isso aconteceu na verdade por eu ter limitado a largura daquelas colunas para 100px, e como a altura da linha estava sendo definida automaticamente com base no conteúdo, acabou "colapsando" o container. Se eu tivesse especificado um tamanho para cada linha com o grid-template-rows, ou alguma outra regra, daria para limitar à altura do container. Um abraço!

@GustavoFilgueiras 2 года назад

@@LayerComp Obrigado Dr..

@felipecastro2993 2 года назад

Obrigado, muito boa sua explicação, esclareceu muito minha dúvidas. Uma perguntinha, vi que no CSS você clica e a linha ficava comentada, qual o atalho você utiliza, pois procurei e até encontrei o do windows mas não funcionou?

@LayerComp 2 года назад

Valeu Felipe! :). Para comentar a linha eu utilizo o CTRL + ; no Windows

@joshuaoliveira8059 Год назад

e como funciona os parâmetros 'grid-column/row' com valores em frações? Eles são correspondente a fração total de colunas/linhas no grid? Exemplo: grid de 4 colunas e 4 linhas. Se eu colocar como grid-column: 1/3; Ele (grid-item) terá a caracteristica de 1 terço de 4? 1,333 partes? E como isso altera realmente o item? Assumirá o formato de 2 partes de 4? Ou irá permanecer como 1 parte de 4?

@wagnerbreggi2943 2 года назад

Suas aulas são excelentes. Mas na próxima, por favor, aumente o fonte ou mostre o código com Zoom. Obrigado.

@LayerComp 2 года назад

Valeu Wagner, realmente eu acabei esquecendo de dar o zoom na hora de gravar, ai quando percebi já era tarde demais kkk, mas nos próximos vou ficar mais atento

@michelliberato1659 Год назад

Eu aprendi muito com sua explicação desde os outros vídeos relacionados ao grid e ao flex, mas eu fiquei com uma pequena dúvida em questão alí no grid-templete-rows dos 11:51 em diante, no momento em que você diz "quando ele quebrar vai virar 200px na segunda linha", neste caso não seria os 400px (de row)?

@michelliberato1659 Год назад

Nos 15:17 também inverteu a ordem do mapa mental, de início era o grid-auto-columns, grid-auto-rows e grid-auto-flow, na sequência passa a ser grid-auto-flow, grid-auto-columns e grid-auto-rows... mas a explicação está excelente.

@moni7211 2 года назад

Rodrigo, posso focar em um só ? usar só o grid ou preciso aprender os dois ? e outra pergunta qual você acaba usando mais ?

@LayerComp 2 года назад

Opa, o ideal é aprender os dois. No dia a dia eu uso mais o Flexbox porque ele é mais versátil para algumas aplicações. O css grid eu uso mais quando vou criar layouts em formato de grade mesmo. :) Se a gente fosse criar o layout do RU-vid por exemplo, eu usaria flexbox no cabeçalho e na sidebar para distribuir o conteúdo, e usaria display grid para criar o layout de cards dos vídeos (e também flexbox dentro de cada card) Os dois compartilham diversas propriedades, então se você aprender o css grid, você vai conseguir entender mais fácil o flexbox.