Grid Layout • Crie layouts rapidamente com CSS3

[@rairockbrasil]

Muito bom, assisto sempre seus videos, sua didática é muito boa, obrigado por sempre está trazendo novidades para gente! valeuuuu

[@leonardoferreira.design]

Eu que agradeço Rairock, continue sempre nos acompanhando e não esquece de dar aquele 'share'. Grande abraço!!! :)

[@rairockbrasil]

Sempre :)

[@osfantasticosnumerosprimos]

Prezado Leonardo, primeiramente quero parabenizá-lo pela aula. Vi algumas palestras aqui no KZbin e também venho pesquisando sobre CSS GRID LAYOUT. Segui e fiz vários testes seguindo passo a passo vossas explicações, o que me chamou mais atenção foi o uso simplificado do MediaQuery (somente duas linhas de comandos) para ajustar o projeto a telas menores, então a partir do seu projeto, inseri fotos, textos, ilustrações e editei uma página completa, e ai o bicho pegou, pois quando diminuía as janelas do IE-10.... e do CHROME 58......os elementos começaram a se sobreporem, empastelando tudo e imagens deformadas. Não contente, inseri em outros projetos de sites, os mesmos comandos que vc utilizou e aconteceu de os mesmos empastelarem. No seu exemplo vc utiliza medidas (15 vh, 10 vh, etc), imagens, espaços também devem seguir este sistema de medidas? Vc saberia informar o que pode ter acontecido? Desde já um grande abraço!

[@mordoke1]

Cara você me ajudou MUITOO sei que o video é antigo, mas era exatamente o que eu estou estudando e não estava entendendo. Obrigado mesmo.

[@KanagawaMarcos]

Eu já tinha visto uma aula de css grid e usado em um projeto algum tempo atrás. (estava trabalhando atualmente mais focado em backend). Como resolvi voltar a treinar meu front, vim revisar CSS Grid. Meus parabéns, você foi o cara mais rápido e conciso que vi falar do assunto.

[@mrbugbear9018]

Cara muito bom, parabéns pelo vídeo, você explica de forma fácil e rápida de entender, não só coloca a TAG por colocar, explica pra que serve e porque usar ela. Muito show 👏🏼

[@JuniorMenezes7]

Muito obrigado. Essa foi a melhor aula de grid. Finalmente consegui entender.

[@garciavinicius]

Simplesmente foda. Parabéns pelo vídeo. Estou enferrujado e faz tempo que não brinco com HTML, CSS etc... e vi um cara falando sobre CSS+Grid, que seria o poder, foda demais etc... E realmente é foda demais. kkkkkk

[@Marcos-hg8kl]

Vlw galera eu estava tendo uma dificuldade para entender o grid, mas agora eu consegui e isso vai me ajudar muito obg :)

[@lucasdemelo6797]

Cara, muito boa a explicação. Já assisti outros vídeos sobre o assunto e você consegue explicar de forma prática e rápida. Valeu! Muito obrigado por compartilhar o conhecimento.

[@ernndsrs4327]

Perfeita aula, como pode ter deslikes? Muito obrigado, ajudou muito.

[@tiagoborges7297]

Esse video foi de grande ajuda para aprimorar meus conhecimentos em desenvolvimento CSS....muito obrigado!

[@vioblaque]

Parabéns, gostei da informação, vc explica muito bem... que Deus o abençoe.

[@gsservicos]

caramba e eu me matando aki somando tamanho da tela pra deixar como eu queria, Valew pela dica ótima aula, mais um inscrito...

[@RicardoBarbosadosSantos]

Muito show sua explicação meu véio. Esse método é ótimo. Parabéns pelo trabalho e muito obrigado pois ajuda muito.

[@zakumyjunior258]

muito bom fera, parabéns

[@marcusmaiialima]

Muito bom, foi de grande ajuda tanto o grid, quanto o flexbox. Usar os dois é sensacional!!!

[@gefranviana4742]

*ME SALVOU, VALEU MESMO MAN. AULA TOP*

[@TheSostenesg7]

Perfeito. entrei sabendo anenas o que era grid, agora entendi na prática e muito rápido. parabéns e obrigado.

[@joaovictorfigueredo372]

Cara, vc é espetacular. Espero um dia programar tão bem quanto vc. Mais que um inscrito, ganhou um fã!!!

[@luccaradaeli8004]

Que video incrivel... Até ontem eu tava vendo grid tabelado em html.

[@fabioaap]

OMG😲😲😲😲 Ferreira, vc simplesmente explodiu a minha cabeça parabéns, adorei esse tutorial, sempre acompanhado vc, muito obrigado​ por compartilhar conosco 😍

[@leonardoferreira.design]

Fabio Pinto dá para dar um bug na cabeça mesmo, isso redefine muita coisa que já aprendemos, mas é incrível a facilidade que essa feature trás. Não deixa de compartilhar com seus amigos, minha ideia é disseminar isso para todos que não conhecem. Obrigado por sempre acompanhar, forte abraço! :)

[@FCisco154]

Viva aos ferreiras!

[@sr.oskar_alhos]

þuŧ4 k3 µ3 þ4riu, ĸ4r4łħ0! MELHOR VÍDEO SOBRE RESPONSIVIDADE QUE VI EM PORTUGUÊS! Gostei tanto deste vídeo que dei um LIKE nele e também subscrevi-me ao teu canal.

[@edvaldojunior6329]

melhor vídeo do canal

[@rafaelbsb86]

Obrigado pelo conteúdo. Explicou de forma clara e bem didática. Ótimo vídeo!!

[@RiveriaLDark]

tutorial incrível

[@cassiogp]

Muito bom cara! Obrigado mesmo!

[@leonardoferreira.design]

Cassio Pereira obrigado, meu caro! Assista também o nosso novo vídeo sobre Design Thinking :)

[@fmaransatto]

Muito bom mesmo Ferreira, parabéns. Gostaria de saber como eu deixaria uma largura no meu aside

[@antoniopinho3068]

Fantástico, obrigado por partilhar.

[@lucasfads]

Ô loko bicho. Não conhecia isso ainda. Que coisa linda!!!

[@wilianluciano2263]

Cara muito Bom! Ótimo vídeo! muito bem explicado!

[@ViniciusSantosSouza]

Meu deus! Isso é muito mágico! Muito Obrigado!

[@genildocs]

conteúdo muito bom.

[@reginaldoaquino1629]

Mandou muito bem!

[@Cristian7Bitencourt]

Aula top, muito boa, Parabéns!

[@lucasromanowskicorso9897]

Excelente conteúdo, obrigado por repassar esse conhecimento

[@NaturezaeAfins]

Nossa muito bom, ficou simples de entender, tava esperando uma explicação dessa. Valeu :D

[@tiagoborges7297]

Muito obrigado pela grande ajuda!

[@tiranicus69]

Muito bom este video foi de grade ajuda para mim, muito obrigado!!

[@music_of_spirit]

Excelente

Parabéns cara, excelente didática!

[@henriquebalzani1563]

Gostei do seu Tutorial!

[@mateuscerqueira8788]

Caraca, d+ a aula é super bem explicada, parabéns, mas queria mesmo uma aula de parallax ou layout horizontal.

[@leonardoferreira.design]

Grande, Mateus. Já assistiu nossa aula sobre parallax? Usando somente jQuery? Pretendo lançar uma mais avançada em breve, com física, aceleração, reacional point e etc...

[@mateuscerqueira8788]

Demais, já vi sim a aula de Parallax só com jQuery, foi muito útil durante um bom tempo, mas agora precisava de uma aula mais avançada. Abraço, sou super fã do seu trabalho,

[@matheussantiago7572]

Gostei muito do video, mas para colocar alguma imagem ou um form coloco no mesmo local onde da o Header, Nav e etc?

[@lucasromanowskicorso9897]

obrigado pelo conteúdo, muito bom... poderia auxiliar de como criar um menu dentro desse nav que seja responsivo (sem javascript) somente com css

[@MontagemdemoveisBrunoHerreira]

muito bom Ferreira ! tava mi questionando sobre isso valeu e muito sucesso

[@tiagobattoni294]

Muito legal o Grid Layout. O que acha de fazer um exemplo de uma página, talvez a home de de uma empresa B2B em que o Grid Layout seja usado? Seria muito legal ver um vídeo assim.

[@leonardoferreira.design]

Josué, temos alguns vídeos na frente, mas já anotei sua sugestão aqui para produzir! Obrigado por acompanhar, grande abraço!

[@jankenponstudios6363]

Leonardo o seu canal é interativo, mas eu queria um video que fala sobre o PHP e o MySQL

[@ynesCAus]

muito bom o video, so uma pergunta, eu tenho uma dificuldade em relação ao media query, que faz o site ser responsivo, vc tem alguma dia que possa me ajudar ??

[@felipycamargo_]

Ferreira, sobre a construção de layouts. Estou usando o site da W3schools para aprender, na parte de layouts que deixei no link abaixo ele me fornecem 4 modos de construção de layout. O Grid se encaixaria em tabelas HTML? Qual devo usar? Quero fazer algo responsivo, posso usar o media para alterar! HTML tables CSS float property CSS framework CSS flexbox www.w3schools.com/html/html_layout.asp www.w3schools.com/html/img_sem_elements.gif

[@compartilhar-e-preciso]

Opa boa noite, muito bom. Neste modelo é possível eu colocar a 1 coluna do content com 80% da área e o aside com 20%?

[@judantas4129]

eu deixaria algumas coisas na errata do video, como por exemplo manter o padrão nos nomes da classe (CSS nao usa camelcase) e nao utilizar ID para estilização.

[@p.raquelizidoro7969]

Obrigada por esse video

[@alajnet]

Excelente vídeo #FerreiraStudios na sua opinião, já posso implementar Grid Layout no meu projetos ou aguardo por mais algum tempo?

[@RamonExplica]

Esclarecedor!!!

[@CanalWWW]

Muito legal! Segura meu like.

[@attmogi]

Ótimo...

[@gcm10000]

Gostei bastante Fugindo um pouco do assunto: Poderia me dizer se há alguma framework, aplicações para design de aplicativos? Eu gostaria de criar um aplicativo para Android e Windows mas não encontro tutoriais, vídeos ou ferramentas para criação de projeto gráfico, apenas sei que há programas para ilustração e wireframming. Obrigado.

[@leonardoferreira.design]

Obrigado pelos elogios Gabriel. Se você se refere ao processo de criação de uma UI, te recomendo dar uma olhada no Adobe XD ou Sketch. Nessas ferramentas, você consegue ter interfaces do Windows, Google, iOS e etc.

[@gabrielleite5990]

eu uso o adobe XD fodarastico, porém só roda no win10 que PELO MENOS NO MEU NOTE ele deixa o cooler maluco, rodando desesperadamente, segundo especialistas, ele mantem a maquina rodando topada! mas instalei somente pra rodar o XD e está rodando lindamente

[@phulgames2861]

Excelente Vídeo!Só faltou deixar o código do seu site feito para download,ajudaria bastante,abraços :p

[@somaisumfato]

putsgrila, isso foi show!

[@midiaptc]

sensacional!!!

[@rafaelgomes7771]

Show.

[@arthurmenezes1623]

meu footer não ficou colado na tela, no right, fica uma parte com a cor que coloquei, e no lado tem uma parte branca, como se estivesse dividido no meio... como faço para deixar o footer comprido colando na outra parte da tela ---> por favor..

[@fagnerroberto5265]

Boa tarde. Leonardo, estranho que estou tentando fazer o exemplo junto com voce no video porem no meu css esta dando mensagem de propriedade grid desconhecida. Porque será?

[@IrlanFreitasjr]

Cara, depois do seu vídeo do processo de desenvolvimento de sites realmente virei seu seguidor por conta do seu trabalho, mas tenho uma dúvida, meu problema com o Front-end, seria o processo de criação de layout para páginas: Qual tipo de layout utilziar, como prototipar e no fim, como ajustar o css. Já trabalho um pouco com Back-end, porem, agora é necessário que saiba ambos. Teria um vídeo que retrate isso, esse processo de criação, muito obrigado.

[@leonardoferreira.design]

Olá, Irlan! Temos 2 vídeos no canal que podem te ajudar: Processo para criação de sites ( goo.gl/g7pxQN ) e uma live que troquei uma ideia com o Walter, o Guilherme e o Pedro sobre Processos Criativos ( goo.gl/AwYGBu ). Espero que te ajudem!

[@FGOMES-sy2dx]

Boa tarde. O que é classificação de grid predominante?

[@Megatorial]

Porque quando crio as áreas assim: "Nav Nav" "cont cont" "footer" Ele dá erro? Ele só aceita se tiver o mesmo de declarações iguais? Tipo de eu usar uma coluna todos vai ser uma se eu usar duas todos vai ser duas agora se eu usar duas colunas e uma coluna da erro?

[@Rilpires]

Pô dei like só pela sua voz kkkkkkkkkkk o conteúdo também foi 10

[@vitormelo22]

Muito maneiro, parabéns pelo vídeo. Eu não costumo a chamar o screen quando chamo o @media, creio que ele assuma por padrão o media estou correto?

[@leonardoferreira.design]

Olá, Vitor. Tudo bem? Então, na verdade por uma questão de media type, acaba se tornando necessário, dá uma olhada nessa doc: www.w3schools.com/css/css3_mediaqueries.asp

[@vitormelo22]

No quarto parágrafo do MDN sobre o assunto diz ser opcional. Eu sinceramente nunca usei e nunca senti diferença, acabei ficando curioso. Tomei um susto usando o Atom ontem quando percebi que a aba tinha ficado menor depois que vi que tinha atualizado, vi que o seu também está. developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

[@leonardoferreira.design]

Perfeito, Vitor. A documentação da Mozzilla está correta, entretanto, a diferença é a seguinte: Quando você define @media (max-width: 750px): Você diz para uma janela com uma largura máxima de 750px que você deseja aqueles estilos. Nesse caso, você estaria falando sobre qualquer coisa menor do que uma tela de desktop na maioria dos casos. Quando você define @media screen (max-width: 750px): Você diz para um dispositivo com uma tela e uma janela com largura máxima de 750px aplicar aquela sequência de estilos. Isso é quase idêntico ao acima, exceto que você está especificando tela em oposição aos outros tipos de mídia disponíveis, como por exemplo mídias de impressão. O screen lhe garante essa amplitude maior. Em outras palavras, ele deve aplicar as regras de estilo a todos os dispositivos de tela, mesmo que ele não saiba o que significam as consultas de mídia. Quanto ao Atom, eu realmente assustei também. Quando visualizei o ajuste fiquei muito feliz. hahaha

[@vitormelo22]

Realmente a única influência no meu caso numa possível impressão da página, o que quase nunca acontece no meu caso. Aproveitando gostaria de sugerir alguns temas. Temas, Pacotes e Teclas de atalhos do Atom, talvez dê para dividir em três vídeos diferentes, mas são assuntos bem bacanas para produtividade na hora de codificar.

[@kenin3526]

olá Ferreira Studios! Tem o Sr: Tem curso de front-end completo pago?

[@acdcsempre]

Pq esse código não funciona 100% no Mozilla? Ele só fica igual no chrome. No mozilla não aparece a coluna, o aside não fica do lado header.

[@igoroliveira9146]

Devo aprender Bootstrap se eu já sei Grid?

[@gabrielleite5990]

cara, minha dúvida, sou leigo disso, eu sei trabalhar com bootstrap, em que momento vc chamou o arquivo css? como exemplo: css/bootstrap.css

[@PedroPanetto]

Esse negócio de código, é coisa de outro muno hahaha

[@CatequesedoLeigo]

Isto está funcionando para IE Edge e Opera?

[@sora6430]

Tive sabendo que o css grid ainda não tem suporte total nos navegadores. Vale a pena trocar o FlexBox por ele ja?

[@presencadigital7783]

Eu estava pensando em usar CSS Grid + Flexbox , pelo que pesquisei no site CAN I USE? o Grid Layout já suporta 80% do mercado Brasileiro

[@sora6430]

sim, CSS Grid e Flexbox não são tão distintos como eu pensava. Você pode usar os dois no mesmo projeto sem problema nenhum.

[@presencadigital7783]

Grid Layout para a Estrutura e FlexBox para a Manipulação dos Elementos. Obrigado!

[@TarcisioPqdt]

Me apaixonei

[@carlosjesus5028]

Top Top Top,....

[@tapasjaiswal6968]

Sir My website appears desktop mode in mobile plz help me sir

[@augustomarcelo]

Você tem algum curso de desenvolvimento web?

[@leonardoferreira.design]

@Marcelo, estamos produzindo um para Outubro. :)

[@augustomarcelo]

Vocês já tem uma ementa pronta?

[@leonardoferreira.design]

@Marcelo somente do curso de UX por enquanto, do curso de dev, estamos desenvolvendo. Algum assunto em específico que gostaria de ver? :)

[@augustomarcelo]

Não tenho muito conhecimento da área pra poder opinar sobre algum assunto, mas se for possível fazer, gostaria que fizessem o curso baseado em um projeto. Acho melhor esse tipo de abordagem pois dá margem pra você (nós seguidores) se espelhar e iniciar outros projetos. Seus vídeos são bem didáticos, então o ganho de conhecimento seria maior ainda.

[@marceloguimaraes796]

não consegui centralizar os nomes de jeito nenhum, alguém me ajuda

[@gersonfontenelle7822]

Putz ... reconheceu "display: grid;" mas não reconheceu "grid-template-areas" ... pq será??

[@midiaptc]

Bom dia, no video de JSON e PHP os comentários estão desativados, teria como ajudar a resolver usar o json_encode nesse script e é possivel usar imagens tambem? $(document).ready(function(){ $.ajax({ type:"GET", url:"localhost/cap/app/cap2/www/api-noticias.php", dataType:"json" }).done(function(data){ var mostra = ""; $.each(data.noticias, function(i, x){ mostra +=''; mostra==''; mostra +=''+ x.titulo+''+x.autor+''; mostra +=''; }); $("#result").html(mostra); }); });

[@leonardoferreira.design]

Werdeson, qual problema você está tendo? Considere a diferenção entre aspas simples e duplas, e nesse caso, recomendo dar um append para injetar os valores no escopo das tags HTML. Dá uma olhada: www.w3schools.com/jquery/jquery_dom_add.asp

[@midiaptc]

Ferreira Studios ® minha intenção era usar o código do seu JSON no outro vídeo e conciliar com esse para usar num app mobile, trazendo os dados de um banco para o app híbrido, mas não consigo trazer a imagem que no banco gravei o nome da mesma.

[@leonardoferreira.design]

Como a resposta das imagens estão registradas e chegando do JSON?

[@midiaptc]

Ferreira Studios ® estão gravadas no banco como char 64, por exemplo "teste.jpg" e chega no JSON com o mesmo nome (string), mas não sei como chamar no js pra ler no app

[@leonardoferreira.design]

Você passa o valor da mesma forma que você trouxe o resultado do Title no Json "x.titulo", deve ser algo do tipo "x.img" e ai você passa isso na url: ''; - vai depender da estrutura do seu Json e do nome que deu para os itens do objeto. Como seu Json está estruturado?

[@Sigameosbons]

Poxa. Em um vídeo de apenas 12 minutos passaram 4 propagandas. Editando ...5 propagandas ....

[@pedroalmeidaTUTORIAL]

vc pode me ajudar em um projeto?

[@leonardoferreira.design]

Oi, Pedro! Mande um e-mail para [e-mail] (=

[@gilliardpacheco1815]

pensei que ela jogava para responsivo sem precisar da midia queres

[@Rodolfo.Rodrigues]

acho o flex box mais facil q o grid

[@michelventura3882]

puxa vida que negocio complicado rsrs

[@marceloguimaraes796]

cade vc cara, ficou rico ?

[@brunoleonardobr]

Explicação horrível. Não entendi nada de estar repetindo os elementos

[@marcuscustodio9338]

Não sei se assisti video ou anúncios, 4 anúncios em 12 minutos. Vai com calma ai chefe!

[@thiagogaspar8031]

Muito bom !!

[@audiocreator9042]

Muito bom !!!!