Explaining CSS Grid (in practice!) | with Mayk Brito

In the world of web development, visual elements are extremely important. If you're taking your first steps in this world, understanding the possibilities of styling and layout is essential to achieving success as a developer.
In this live class, we will simplify the process of building layouts using CSS Grid and explore some of the varieties of page structures using this strategy.
So, are you ready to code?

[@rocketseat]

No aniversário da Rocketseat, quem ganha uma OFERTA EXCLUSIVA é você! Descubra mais: rseat.in/ENt90Atzj

[@TiagoRodrigues-nq4mo]

Que aulão, só não aproveita quem não quer!!!

[@UandersonFT]

de fato, estou retornando pela base e isso está me ajudando demais a criar minha primeira landing page responsiva

[@giovanniperrotta2658]

Mayk que didática fantástica, parabéns excelente conteúdo.

[@BorisZaidan]

Que aula, a explicação faz parecer fácil, parabéns aula nota 1000. didática excelente!

[@ranan.js1080]

🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯

[@raffavnunes]

Fala Mayk, blz? Como eu faço para criar um layout com texto e imagens e por exemplo pegar um imagem em 1 e meia linha ou coluna tipo desalinhando com outros elementos?

[@raphaelrychard5440]

Simplesmente obrigado kkkkkkkkkkkkkkkkkkk

[@DSV_ELITE]

Mas como que o computador vai saber quem é o 1 2 3 e o 4??

[@DanielRios549]

CSS Grid é um negócio simplesmente fantástico (sim, 🤯 explodiu minha cabeça quando conheci), vc cria áreas e organiza da forma que quiser, podendo mudar de acordo com o dispositivo, e isso sem alterar a marcação, é lindo demais. Minha propriedade favorita é o shorhand grid-template, gosto muito de criar o grid com ele porque fica bem mais fácil, vc consegue dar nome as areas e organizar em strings como se fosse o próprio grid, e pra posicionar basta usar o nome da area que vc criou nos filhos com grid-area

[@ranan.js1080]

conteúdo simplesmente sensacional cara e totalmente de graça, é um prazer imenso poder desfrutar da didática do Mayk cara, impecável, cabeça explodindo aqui!

[@voelinteractive9108]

qual o nome desse editor de código?

[@maviuki]

explodiu aquikkk

[@MoisésBarros-g7t]

mark, você é pika!

[@ezequielsantos2635]

a aula esta travando

[@BrunoSantos-rp5qq]

Bom🤯🤯🤯🤯🤯

[@M1nutos_de_sabedoria]

Estava penando pra entender CSS Grid... vc é insano, Mayk !!

[@Digitronica]

eu acho que Grid é grade, nao grelha. rs

[@maykbrito]

é isso mesmo!! na hora eu pensei na grelha de churrasco e fiquei preso nela hahaha 😍

[@coyote_ag]

🤯🤯🤯🤯🤯

[@HeliezerGarcia01]

Para trabalhar com responsividade, fica mais facil utilizar grid template areas, ajuda muito mais identificar o que esta fazendo no código e aonde vc esta manipulando.

[@bassleon84]

olá, excelente aula, parabéns Mayk! Nessa parte de desenvolvedor (DEVTOOLS) na hora de mostrar as linhas e coluna do Grid, em vez de só colocar o mouse em cima do container, no caso o body, tem um botão ao lado com o nome grid, é só clicar que as linhas ficam ficam visíveis e você pode manusear o mouse sem que elas sumam.

[@pscardoso]

Fala, Mayk. Qual o nome desse compilador de código?

[@maykbrito]

fronteditor.dev

[@the.occult]

Se eu pudesse dar mil likes eu daria, entender grid e também flex eram o que eu mais estava tendo dificuldade no CSS e agora eu tô entendendo bem melhor.

[@MarceloNascimento-km1yb]

Cara, vc é D+!!!

[@MarceloHenrique-mn8vf]

Caramba Grid CSS destravado agora, super valeu!!!!

[@yagamikisuke]

Maykão salvando.... didática fantástica.

[@daviamerico2268]

prefiro alternar entre display flex e block

[@MicaelAbreu]

cara você é o melhor, sério aaaaaaa

[@henriqueb.2899]

É muito bom aprender com quem sabe e tem prazer em ensinar ! Que aula ! 🤯

[@CandidoZfinda]

Aula top demais

[@rocketseat]

Que bom que curtiu, Candido 💜

[@natancent1]

Cara o Mayk é fantástico na sua didática!

[@frroad1698]

eu consegui fazer um trabalho de portifólio, graças a seu video.

[@rocketseat]

Uhhulll!! Parabéns pela dedicação

[@NutsAboutData]

Maykão, o Tailwind CSS usa o Grid ou o Flexbox ? Valeu!

[@rocketseat]

Os dois

[@marafabiana852]

Imensamente grata pelo vídeo.

[@jonasbfranco]

Maikao, que aula top, mas fiquei interessado nesta ferramenta que voce incluiu o Miro, o Front-end Editor, etc, qual o nome desta ferramenta/aplicaitivo.

[@rocketseat]

É o navegador Arc

[@marcoscouto6471]

sensacional que se fala

[@18bigrock]

Explicação ótima 😊

[@iury664]

muito boa aula de grid.

[@willborral]

Tops man !!!

[@RafaelaNascimento-e9p]

Incrivel!!

[@carloshfmaciel]

Que didática sensacional! Muito obrigado!

[@enzomateus3615]

Show!!

[@rocketseat]

✌

[@CandidoZfinda]

Oi

[@rocketseat]

Oi ☺

[@matecceara8395]

Show

[@rocketseat]

✌

[@thassiok]

🔥🚀👨‍🚀

[@rocketseat]

Bora pra cima! 🚀