{"id":14331,"date":"2019-04-10T11:25:57","date_gmt":"2019-04-10T14:25:57","guid":{"rendered":"http:\/\/www.impacta.com.br\/blog\/?p=14331"},"modified":"2022-08-07T17:54:54","modified_gmt":"2022-08-07T20:54:54","slug":"flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/","title":{"rendered":"Flexbox ou CSS Grid: quando utilizar?"},"content":{"rendered":"\n<p><span style=\"font-size: 14pt;\">Qual \u00e9 a melhor op\u00e7\u00e3o dispon\u00edvel para cria\u00e7\u00e3o de&nbsp;<a href=\"https:\/\/www.impacta.com.br\/blog\/2014\/05\/07\/simplicidade-efetiva-sites-com-layout-baseado-em-scrolling\/\" target=\"_blank\" rel=\"noopener noreferrer\">layouts<\/a>: flexbox ou CSS grid? Essa pergunta nos leva \u00e0 confirma\u00e7\u00e3o do quanto \u00e9 importante para os desenvolvedores utilizarem ferramentas que facilitem a elabora\u00e7\u00e3o de layouts para web.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">A escolha entre uma ferramenta e outra depende do objetivo a ser atingido. Hoje, temos ao nosso alcance algo mais importante que uma boa especifica\u00e7\u00e3o: dispomos da implementa\u00e7\u00e3o de uma boa especifica\u00e7\u00e3o nos principais browsers.<\/span><\/p>\n\n\n\n<p>Est\u00e1 sem tempo para ler o conte\u00fado agora? Escute o \u00e1udio abaixo:<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"100%\" height=\"83\" scrolling=\"no\" src=\"https:\/\/go.vooozer.com\/embed\/fa360a22\" frameborder=\"0\" title=\"Narra\u00e7\u00e3o humana do artigo\" style=\"height: 83px !important;\" allowfullscreen><\/iframe>\n\n\n\n<p><span style=\"font-size: 14pt;\">Neste post, vamos apresentar cada uma das duas ferramentas e falar sobre o momento ideal para us\u00e1-las durante o <a title=\"Desenvolvimento de aplica\u00e7\u00f5es web: tire suas d\u00favidas sobre o assunto!\" href=\"https:\/\/www.impacta.com.br\/blog\/2018\/01\/05\/desenvolvimento-de-aplicacoes-web-tire-suas-duvidas-sobre-o-assunto\/\" target=\"_blank\" rel=\"noopener noreferrer\">desenvolvimento <\/a>de projetos para as diversas plataformas da internet. Acompanhe e saiba como voc\u00ea pode tirar o m\u00e1ximo de proveito das duas op\u00e7\u00f5es. Vamos l\u00e1!<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">Afinal, o que \u00e9 flexbox e CSS grid e como eles funcionam?<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-size: 14pt;\">At\u00e9 hoje, os improvisos foram constantes durante a cria\u00e7\u00e3o de layouts com CSS. Isso porque, at\u00e9 o momento, n\u00e3o havia nada espec\u00edfico para essa fun\u00e7\u00e3o. No in\u00edcio, era necess\u00e1rio usar uma tabela como forma de facilitar a elabora\u00e7\u00e3o dos layouts, que davam margem a diversos problemas.<\/span><br><span style=\"font-size: 14pt;\">Na sequ\u00eancia, foi necess\u00e1rio utilizar o float em vez de tabelas \u2014 o que foi um facilitador, pelo fato de ser um recurso mais flex\u00edvel e exigir menos&nbsp;<a href=\"https:\/\/www.impacta.com.br\/blog\/2016\/04\/25\/5-motivos-para-aprender-html5\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML<\/a>. Entretanto, por ser algo limitado e n\u00e3o apropriado para essa fun\u00e7\u00e3o, n\u00e3o foi a melhor solu\u00e7\u00e3o.<\/span><br><span style=\"font-size: 14pt;\">Assim, surgiu o&nbsp;<a href=\"https:\/\/www.impacta.com.br\/blog\/2015\/03\/21\/conheca-o-flexbox-do-css3-e-suas-funcionalidades\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS flexbox<\/a>&nbsp;layout ou, simplesmente, flexbox, que veio para alinhar e distribuir espa\u00e7os entre itens em um container, cuja ideia principal \u00e9 dar a capacidade de alterar a largura, altura e a ordem dos elementos para promover um preenchimento melhor do espa\u00e7o dispon\u00edvel, principalmente com a finalidade de conversar com todos os tipos de dispositivos e <a title=\"Como aumentar a produtividade trabalhando em pequenas telas\" href=\"https:\/\/www.impacta.com.br\/blog\/2015\/09\/25\/como-aumentar-a-produtividade-trabalhando-em-pequenas-telas\/\" target=\"_blank\" rel=\"noopener noreferrer\">tamanhos de tela<\/a>.<\/span><br><span style=\"font-size: 14pt;\">Contudo, o glorioso flexbox tamb\u00e9m n\u00e3o foi desenvolvido para sanar todos os problemas, ainda mais quando se trata das interfaces mais complexas. Considerando que, hoje, estamos rompendo as barreiras dos padr\u00f5es tecnol\u00f3gicos j\u00e1 existentes, podemos contar com uma nova \u201cengenhoca\u201d: o CSS grid layout. Ent\u00e3o, qual \u00e9 o principal ponto de distin\u00e7\u00e3o entre um recurso e outro?<\/span><br><span style=\"font-size: 14pt;\">O flexbox \u00e9 usado para projetar layouts unidimensionais simplificados, com uma disposi\u00e7\u00e3o em linha reta, e \u00e9 mais indicado para os componentes de aplicativos e layouts em escala pequena. J\u00e1 o CSS grid \u00e9 destinado \u00e0 cria\u00e7\u00e3o de layouts bidimensionais de complexidade maior \u2014 \u00e9 ideal para organizar a estrutura de um esquema com elementos de n\u00edvel mais elevado, como cabe\u00e7alhos, rodap\u00e9s, se\u00e7\u00f5es e sidebar.<\/span><br><span style=\"font-size: 14pt;\">Dessa forma, a diferen\u00e7a essencial observada entre os dois est\u00e1 na distribui\u00e7\u00e3o dos itens. Vale dizer que o CSS \u00e9 considerado o primeiro m\u00f3dulo desenvolvido especialmente para resolver antigos problemas de elabora\u00e7\u00e3o de layout do passado. No entanto, \u00e9 um erro pensar que ele chegou para ocupar o lugar do flexbox.<\/span><\/p>\n\n\n\n<p class=\"has-text-align-left\"><span style=\"font-size: 14pt;\">Os dois recursos podem se complementar \u2014 j\u00e1 que um faz o que o outro n\u00e3o faz, ambos podem trabalhar em conjunto. Algumas coisas podem ser feitas com os dois, mas um executa de forma mais simples e melhor cada tipo de trabalho. Confira, no pr\u00f3ximo t\u00f3pico, em quais situa\u00e7\u00f5es cada um deles funciona melhor.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">Quando usar o flexbox?<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-size: 14pt;\">Ele tamb\u00e9m pode ser usado para trabalhar elementos de forma bidimensional, mas o flexbox opera melhor quando trabalhado com os itens em apenas uma dimens\u00e3o, ou seja, em coluna ou linha.<\/span><br><span style=\"font-size: 14pt;\">Um exemplo f\u00e1cil de visualizar \u00e9 o menu posicionado de forma horizontal ou vertical, o que indica o quanto ele \u00e9 bom para promover alinhamentos, n\u00e3o importando o sentido, nem mesmo a quantidade de elementos dispostos.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">Quando usar o grid?<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-size: 14pt;\">O grid pode ser usado para trabalhar com os itens em uma \u00fanica dimens\u00e3o; no entanto, \u00e9 perfeito para dispor os elementos em duas dimens\u00f5es, especialmente quando \u00e9 preciso definir a estrutura de uma p\u00e1gina (o que seria complicado com o flexbox).<\/span><br><span style=\"font-size: 14pt;\">Com o grid, voc\u00ea indica o ponto em que um elemento come\u00e7a e acaba dentro da sua grid, o que proporciona muita flexibilidade. \u00c9 poss\u00edvel, ainda, nomear \u00e1reas da sua grid e, a partir disso, indicar um elemento pertencente \u00e0quela \u00e1rea, deixando o c\u00f3digo muito mais leg\u00edvel e f\u00e1cil de manter.<\/span><br><span style=\"font-size: 14pt;\">Assim, se o layout apresentar um determinado n\u00famero de colunas e linhas, \u00e9 prov\u00e1vel que o grid seja uma op\u00e7\u00e3o melhor que o flexbox para a fun\u00e7\u00e3o. Al\u00e9m disso, talvez seja necess\u00e1rio escrever menos media queries, uma vez que \u00e9 poss\u00edvel usufruir de funcionalidades como autolayout, minmax, auto-fill e repeat.<\/span><br><span style=\"font-size: 14pt;\">Em rela\u00e7\u00e3o ao suporte atual de navegadores ao CSS grid, no Brasil pode chegar a 90%. Isso cria uma oportunidade de reflex\u00e3o sobre a forma como a compatibilidade com&nbsp;<a href=\"https:\/\/www.impacta.com.br\/blog\/2016\/02\/02\/veja-como-eram-os-layouts-dos-sites-mais-visitados-quando-foram-lancados\/\" target=\"_blank\" rel=\"noopener noreferrer\">vers\u00f5es anteriores<\/a>&nbsp;\u00e9 encarada. Esse m\u00f3dulo (layout module) proporciona a altera\u00e7\u00e3o do layout de um documento sem causar interfer\u00eancia na sua ordem (Source-Order Independence).<\/span><br><span style=\"font-size: 14pt;\">Isso quer dizer que o CSS grid \u00e9 um recurso puramente visual e, se for usado corretamente, n\u00e3o prejudica a comunica\u00e7\u00e3o entre os conte\u00fados no documento. Sendo assim, surpreendentemente, a falta de suporte ao CSS grid em um navegador antigo n\u00e3o chega a afetar a experi\u00eancia do usu\u00e1rio, apenas a torna diferente.<\/span><br><span style=\"font-size: 14pt;\">Quando o conte\u00fado \u00e9 separado do visual, ele chega at\u00e9 o visitante e o CSS grid pode melhorar a experi\u00eancia de todos que receberem suporte para isso por meio de um layout mais competente.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">Quando podemos usar os dois juntos?<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-size: 14pt;\">Por que n\u00e3o usufruir dos dois recursos juntos quando isso \u00e9 poss\u00edvel? Para isso, voc\u00ea pode definir o layout da p\u00e1gina com CSS grid e ter um cabe\u00e7alho com um menu organizado por meio do flexbox.<\/span><br><span style=\"font-size: 14pt;\">Cada um dos itens do menu tem uma pequena estrutura que serve para posicionar os elementos (texto e \u00edcone) e isso pode ser visto pelas bordas brancas. Esse tipo de organiza\u00e7\u00e3o \u00e9 feita com o aux\u00edlio do CSS grid e, portanto, dependendo da necessidade \u2014 um deles pode ser a op\u00e7\u00e3o mais adequada, mas isso n\u00e3o exclui o outro.<\/span><br><span style=\"font-size: 14pt;\">Se dispusermos de duas ferramentas com fun\u00e7\u00f5es distintas, mas complementares (como garfo e faca) nada impede que voc\u00ea use as duas, desde que isso seja feito no momento oportuno, sempre com a finalidade de agilizar as coisas e promover intera\u00e7\u00f5es mais intuitivas, n\u00e3o \u00e9 mesmo?<\/span><br><span style=\"font-size: 14pt;\">Tudo \u00e9 uma quest\u00e3o de pr\u00e1tica e intimidade na hora de escolher entre flexbox ou CSS grid. Ent\u00e3o, \u00e9 muito importante sempre buscar <a href=\"https:\/\/impacta.com.br\/escola\/Desenvolvimento-de-Aplica%C3%A7%C3%B5es\" target=\"_blank\" rel=\"noopener noreferrer\">capacita\u00e7\u00e3o<\/a> para entender melhor os conceitos que envolvem a \u00e1rea de programa\u00e7\u00e3o. Opte por institui\u00e7\u00f5es que ofere\u00e7am&nbsp;<a href=\"https:\/\/www.impacta.com.br\/blog\/2018\/01\/26\/6-principais-cursos-e-certificacoes-para-alavancar-sua-carreira-em-desenvolvimento\/\" target=\"_blank\" rel=\"noopener noreferrer\">cursos direcionados<\/a>&nbsp;e atendam \u00e0s necessidades pr\u00e1ticas e te\u00f3ricas do profissional de TI.<\/span><br><span style=\"font-size: 14pt;\">Se voc\u00ea deseja come\u00e7ar a se aprofundar em programa\u00e7\u00e3o, n\u00e3o deixe de baixar o&nbsp;<a href=\"https:\/\/www.impacta.com.br\/blog\/2017\/05\/10\/e-book-manual-definitivo-da-logica-de-programacao\/\" target=\"_blank\" rel=\"noopener noreferrer\">Manual Definitivo da L\u00f3gica de Programa\u00e7\u00e3o<\/a>&nbsp;que preparamos para voc\u00ea!<\/span><\/p>\n<div class=\"sharing-default-minimal post-bottom\"><div class=\"nectar-social default\" data-position=\"\" data-rm-love=\"0\" data-color-override=\"override\"><div class=\"nectar-social-inner\"><a href=\"#\" class=\"nectar-love\" id=\"nectar-love-14331\" title=\"Love this\"> <i class=\"icon-salient-heart-2\"><\/i><span class=\"love-text\">Love<\/span><span class=\"total_loves\"><span class=\"nectar-love-count\">0<\/span><\/span><\/a><a class='facebook-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-facebook'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='twitter-share nectar-sharing' href='#' title='Share this'> <i class='fa icon-salient-x-twitter'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='linkedin-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-linkedin'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='pinterest-share nectar-sharing' href='#' title='Pin this'> <i class='fa fa-pinterest'><\/i> <span class='social-text'>Pin<\/span> <\/a><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Qual \u00e9 a melhor op\u00e7\u00e3o dispon\u00edvel para cria\u00e7\u00e3o de&nbsp;layouts: flexbox ou CSS grid? Essa pergunta nos leva \u00e0 confirma\u00e7\u00e3o do quanto \u00e9 importante para os desenvolvedores utilizarem ferramentas que facilitem a elabora\u00e7\u00e3o de layouts para web. A escolha entre uma ferramenta e outra depende do objetivo a ser atingido. Hoje, temos ao nosso alcance algo [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":16993,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[826,172,827,724,828,829,190],"class_list":["post-14331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-criacao-de-layouts","tag-css","tag-css-grid","tag-desenvolvedor-web","tag-flexbox","tag-flexbox-ou-css-grid","tag-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Flexbox ou CSS Grid: quando utilizar?<\/title>\r\n<meta name=\"description\" content=\"Qual \u00e9 a melhor op\u00e7\u00e3o dispon\u00edvel para cria\u00e7\u00e3o de layouts: flexbox ou CSS grid? Confira e entenda as diferen\u00e7as e em quais casos usar cada ferramenta!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/\" \/>\r\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Flexbox ou CSS Grid: quando utilizar?\" \/>\r\n<meta property=\"og:description\" content=\"Qual \u00e9 a melhor op\u00e7\u00e3o dispon\u00edvel para cria\u00e7\u00e3o de layouts: flexbox ou CSS grid? Confira e entenda as diferen\u00e7as e em quais casos usar cada ferramenta!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\" \/>\r\n<meta property=\"article:published_time\" content=\"2019-04-10T14:25:57+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2022-08-07T20:54:54+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/flexbox-ou-css.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"850\" \/>\r\n\t<meta property=\"og:image:height\" content=\"284\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Reda\u00e7\u00e3o Impacta\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Reda\u00e7\u00e3o Impacta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/\",\"name\":\"Flexbox ou CSS Grid: quando utilizar?\",\"isPartOf\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/flexbox-ou-css.jpg\",\"datePublished\":\"2019-04-10T14:25:57+00:00\",\"dateModified\":\"2022-08-07T20:54:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c\"},\"description\":\"Qual \u00e9 a melhor op\u00e7\u00e3o dispon\u00edvel para cria\u00e7\u00e3o de layouts: flexbox ou CSS grid? Confira e entenda as diferen\u00e7as e em quais casos usar cada ferramenta!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/#primaryimage\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/flexbox-ou-css.jpg\",\"contentUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/flexbox-ou-css.jpg\",\"width\":850,\"height\":284},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.impacta.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flexbox ou CSS Grid: quando utilizar?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/\",\"name\":\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\",\"description\":\"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c\",\"name\":\"Reda\u00e7\u00e3o Impacta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g\",\"caption\":\"Reda\u00e7\u00e3o Impacta\"},\"url\":\"https:\/\/www.impacta.com.br\/blog\/author\/redacao\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flexbox ou CSS Grid: quando utilizar?","description":"Qual \u00e9 a melhor op\u00e7\u00e3o dispon\u00edvel para cria\u00e7\u00e3o de layouts: flexbox ou CSS grid? Confira e entenda as diferen\u00e7as e em quais casos usar cada ferramenta!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/","og_locale":"pt_BR","og_type":"article","og_title":"Flexbox ou CSS Grid: quando utilizar?","og_description":"Qual \u00e9 a melhor op\u00e7\u00e3o dispon\u00edvel para cria\u00e7\u00e3o de layouts: flexbox ou CSS grid? Confira e entenda as diferen\u00e7as e em quais casos usar cada ferramenta!","og_url":"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/","og_site_name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","article_published_time":"2019-04-10T14:25:57+00:00","article_modified_time":"2022-08-07T20:54:54+00:00","og_image":[{"width":850,"height":284,"url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/flexbox-ou-css.jpg","type":"image\/jpeg"}],"author":"Reda\u00e7\u00e3o Impacta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Reda\u00e7\u00e3o Impacta","Est. reading time":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/","url":"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/","name":"Flexbox ou CSS Grid: quando utilizar?","isPartOf":{"@id":"https:\/\/www.impacta.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/#primaryimage"},"image":{"@id":"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/#primaryimage"},"thumbnailUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/flexbox-ou-css.jpg","datePublished":"2019-04-10T14:25:57+00:00","dateModified":"2022-08-07T20:54:54+00:00","author":{"@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c"},"description":"Qual \u00e9 a melhor op\u00e7\u00e3o dispon\u00edvel para cria\u00e7\u00e3o de layouts: flexbox ou CSS grid? Confira e entenda as diferen\u00e7as e em quais casos usar cada ferramenta!","breadcrumb":{"@id":"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/#primaryimage","url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/flexbox-ou-css.jpg","contentUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/flexbox-ou-css.jpg","width":850,"height":284},{"@type":"BreadcrumbList","@id":"https:\/\/www.impacta.com.br\/blog\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.impacta.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Flexbox ou CSS Grid: quando utilizar?"}]},{"@type":"WebSite","@id":"https:\/\/www.impacta.com.br\/blog\/#website","url":"https:\/\/www.impacta.com.br\/blog\/","name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","description":"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/2e0896bac7656da15b68f5ad2ddd0d8c","name":"Reda\u00e7\u00e3o Impacta","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7443a59e479c8f31067628e3a4bed9ad?s=96&d=mm&r=g","caption":"Reda\u00e7\u00e3o Impacta"},"url":"https:\/\/www.impacta.com.br\/blog\/author\/redacao\/"}]}},"acf":{"post_description":"","capa_mobile":false},"_links":{"self":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/14331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/comments?post=14331"}],"version-history":[{"count":0,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/14331\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media\/16993"}],"wp:attachment":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media?parent=14331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/categories?post=14331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/tags?post=14331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}