{"id":14900,"date":"2019-11-14T10:07:22","date_gmt":"2019-11-14T10:07:22","guid":{"rendered":"http:\/\/boomer.pt\/?p=14900"},"modified":"2019-11-14T10:07:22","modified_gmt":"2019-11-14T10:07:22","slug":"grids-no-web-design","status":"publish","type":"post","link":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/","title":{"rendered":"Grids no Web-Design"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Grids no Web-Design<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tGrids s\u00e3o um dos elementos essenciais de qualquer projeto.\nPermitem criar est\u00e9tica e coer\u00eancia, gra\u00e7as \u00e0 possibilidade de organizar os elementos da interface de acordo com um layout espec\u00edfico.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Neste artigo, vamos falar de algumas dicas sobre as Grids e como utiliz\u00e1-las.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Benef\u00edcios do uso de Grids<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Transpar\u00eancia e consist\u00eancia<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As grids<\/em> constroem o layout da interface, gra\u00e7as ao qual refor\u00e7am a consist\u00eancia na coloca\u00e7\u00e3o de elementos. Al\u00e9m disso, uma grid<\/em> bem elaborada garante uma melhor e mais f\u00e1cil digitaliza\u00e7\u00e3o dos componentes na tela, o que contribui para uma experi\u00eancia positiva do usu\u00e1rio.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Mais f\u00e1cil de criar capacidade de resposta<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Hoje em dia, como referido no artigo \u201cWeb Responsivo\u201d, os designs responsivos s\u00e3o essenciais! O uso das grids<\/em> fornece um layout consistente em v\u00e1rios dispositivos com diferentes tamanhos de tela.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Processo de design mais r\u00e1pido<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As grids<\/em> fornecem aos designers diretrizes para propor\u00e7\u00f5es entre elementos, como espa\u00e7amento e margens, o que acelera o trabalho e reduz a possibilidade de erro.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Colabora\u00e7\u00e3o mais f\u00e1cil<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As grids<\/em> facilitam o trabalho de designers e programadores.<\/p>

Gra\u00e7as a um plano de layout comum ou diretrizes para espa\u00e7amento e margens, o trabalho \u00e9 coerente e mais integrado.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\nTerminologia b\u00e1sica da grids\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Antes de come\u00e7armos a trabalhar com a constru\u00e7\u00e3o da grid<\/em>, vale a pena conhecer a terminologia de seus elementos para saber o que s\u00e3o, pelo que s\u00e3o respons\u00e1veis, e como utiliz\u00e1-los.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Dimens\u00f5es do dispositivo<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\u00c9 fundamental pensar no dispositivo para o qual estamos a criar o<\/p>

projeto para verificar o funcionamento do ecr\u00e3 e conhecer poss\u00edveis limita\u00e7\u00f5es. Aqui temos os exemplos das tr\u00eas resolu\u00e7\u00f5es de ecr\u00e3 mais comuns.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

N\u00famero de colunas<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

O n\u00famero de colunas usadas na estrutura da grid<\/em> depende do designer e das necessidades do projeto. No entanto, podemos usar as estruturas de grid mais populares, abaixo temos os tipos usados para v\u00e1rios dispositivos.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Sistema de grid de 4 pontos<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Uma grid<\/em> e os elementos de interface constru\u00eddos para uma determinada escala s\u00e3o mais f\u00e1ceis de dimensionar e tamb\u00e9m trazem ordem ao design. Os sistemas de grid de 8pt ou 4pt s\u00e3o os tipos mais comums. (4pt d\u00e1-nos mais flexibilidade no momento de desenvolver o projeto)<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Grid Simples vs Complexa<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Ao projetar, podemos usar o modelo de grid padr\u00e3o, que consiste apenas em colunas verticais, ou criar uma grid mais avan\u00e7ada adicionando linhas na horizontal, o que ajuda a organizar o conte\u00fado do projeto e garantir a consist\u00eancia dos elementos.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Em suma, o fundamental da utiliza\u00e7\u00e3o de Grids \u00e9 a perce\u00e7\u00e3o de como elas funcionam e us\u00e1-las da maneira consistente e correta.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Grids s\u00e3o um dos elementos essenciais de qualquer projeto.
\nPermitem criar est\u00e9tica e coer\u00eancia, gra\u00e7as \u00e0 possibilidade de organizar os elementos da interface de acordo com um layout espec\u00edfico.<\/p>\n","protected":false},"author":2,"featured_media":14902,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[131,130,156,197,198,140,154,151,224,139,148,133,132,223],"class_list":["post-14900","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria","tag-agencia-digital","tag-agenciademarketing","tag-ai","tag-boomer","tag-boomer-academy","tag-branding","tag-design","tag-gestaoredesosciais","tag-grids-no-webdesign","tag-marca","tag-marketingdigital","tag-redessociais","tag-vila-nova-de-famalicao","tag-webdesign"],"yoast_head":"\nGrids no Web-Design - BOOMER<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grids no Web-Design - BOOMER\" \/>\n<meta property=\"og:description\" content=\"Grids s\u00e3o um dos elementos essenciais de qualquer projeto. Permitem criar est\u00e9tica e coer\u00eancia, gra\u00e7as \u00e0 possibilidade de organizar os elementos da interface de acordo com um layout espec\u00edfico.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"BOOMER\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/boomer.pt\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-14T10:07:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/11\/w47_Grids-no-WebDesign.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2001\" \/>\n\t<meta property=\"og:image:height\" content=\"1001\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Pedro Santos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pedro Santos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/\"},\"author\":{\"name\":\"Pedro Santos\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/95ab929bda16e84d1e2383c7934138a5\"},\"headline\":\"Grids no Web-Design\",\"datePublished\":\"2019-11-14T10:07:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/\"},\"wordCount\":441,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#organization\"},\"image\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/11\/w47_Grids-no-WebDesign.png\",\"keywords\":[\"agencia digital\",\"agenciademarketing\",\"ai\",\"Boomer\",\"Boomer Academy\",\"branding\",\"design\",\"gestaoredesosciais\",\"Grids no webdesign\",\"marca\",\"marketingdigital\",\"redessociais\",\"vila nova de famalicao\",\"webdesign\"],\"articleSection\":[\"Sem categoria\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/\",\"name\":\"Grids no Web-Design - BOOMER\",\"isPartOf\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/11\/w47_Grids-no-WebDesign.png\",\"datePublished\":\"2019-11-14T10:07:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#primaryimage\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/11\/w47_Grids-no-WebDesign.png\",\"contentUrl\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/11\/w47_Grids-no-WebDesign.png\",\"width\":2001,\"height\":1001},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/boomer.pt\/raiodoblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Grids no Web-Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#website\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/\",\"name\":\"BOOMER\",\"description\":\"Brand & Digital Agency\",\"publisher\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/boomer.pt\/raiodoblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#organization\",\"name\":\"BOOMER\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/BoomerLogo-2.svg\",\"contentUrl\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/BoomerLogo-2.svg\",\"width\":154,\"height\":40,\"caption\":\"BOOMER\"},\"image\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/boomer.pt\",\"https:\/\/www.instagram.com\/boomerpt\/\",\"https:\/\/www.linkedin.com\/company\/2641069\/admin\/\",\"https:\/\/www.youtube.com\/channel\/UCJ4-FswWDdO5i1UVdIUqtGw\/feed\",\"https:\/\/www.behance.net\/boomer_pt\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/95ab929bda16e84d1e2383c7934138a5\",\"name\":\"Pedro Santos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29064e2ffd89dbe09bcc4ffc9ab2cbe0342db9e454b72b522f0d5852f58417eb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29064e2ffd89dbe09bcc4ffc9ab2cbe0342db9e454b72b522f0d5852f58417eb?s=96&d=mm&r=g\",\"caption\":\"Pedro Santos\"},\"description\":\"Designer\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/author\/pedro-santos\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Grids no Web-Design - BOOMER","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:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Grids no Web-Design - BOOMER","og_description":"Grids s\u00e3o um dos elementos essenciais de qualquer projeto. Permitem criar est\u00e9tica e coer\u00eancia, gra\u00e7as \u00e0 possibilidade de organizar os elementos da interface de acordo com um layout espec\u00edfico.","og_url":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/","og_site_name":"BOOMER","article_publisher":"https:\/\/www.facebook.com\/boomer.pt","article_published_time":"2019-11-14T10:07:22+00:00","og_image":[{"width":2001,"height":1001,"url":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/11\/w47_Grids-no-WebDesign.png","type":"image\/png"}],"author":"Pedro Santos","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pedro Santos","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#article","isPartOf":{"@id":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/"},"author":{"name":"Pedro Santos","@id":"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/95ab929bda16e84d1e2383c7934138a5"},"headline":"Grids no Web-Design","datePublished":"2019-11-14T10:07:22+00:00","mainEntityOfPage":{"@id":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/"},"wordCount":441,"commentCount":0,"publisher":{"@id":"https:\/\/boomer.pt\/raiodoblog\/#organization"},"image":{"@id":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/11\/w47_Grids-no-WebDesign.png","keywords":["agencia digital","agenciademarketing","ai","Boomer","Boomer Academy","branding","design","gestaoredesosciais","Grids no webdesign","marca","marketingdigital","redessociais","vila nova de famalicao","webdesign"],"articleSection":["Sem categoria"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/","url":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/","name":"Grids no Web-Design - BOOMER","isPartOf":{"@id":"https:\/\/boomer.pt\/raiodoblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#primaryimage"},"image":{"@id":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/11\/w47_Grids-no-WebDesign.png","datePublished":"2019-11-14T10:07:22+00:00","breadcrumb":{"@id":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#primaryimage","url":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/11\/w47_Grids-no-WebDesign.png","contentUrl":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/11\/w47_Grids-no-WebDesign.png","width":2001,"height":1001},{"@type":"BreadcrumbList","@id":"https:\/\/boomer.pt\/raiodoblog\/grids-no-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/boomer.pt\/raiodoblog\/"},{"@type":"ListItem","position":2,"name":"Grids no Web-Design"}]},{"@type":"WebSite","@id":"https:\/\/boomer.pt\/raiodoblog\/#website","url":"https:\/\/boomer.pt\/raiodoblog\/","name":"BOOMER","description":"Brand & Digital Agency","publisher":{"@id":"https:\/\/boomer.pt\/raiodoblog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/boomer.pt\/raiodoblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/boomer.pt\/raiodoblog\/#organization","name":"BOOMER","url":"https:\/\/boomer.pt\/raiodoblog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/logo\/image\/","url":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/BoomerLogo-2.svg","contentUrl":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/BoomerLogo-2.svg","width":154,"height":40,"caption":"BOOMER"},"image":{"@id":"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/boomer.pt","https:\/\/www.instagram.com\/boomerpt\/","https:\/\/www.linkedin.com\/company\/2641069\/admin\/","https:\/\/www.youtube.com\/channel\/UCJ4-FswWDdO5i1UVdIUqtGw\/feed","https:\/\/www.behance.net\/boomer_pt"]},{"@type":"Person","@id":"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/95ab929bda16e84d1e2383c7934138a5","name":"Pedro Santos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29064e2ffd89dbe09bcc4ffc9ab2cbe0342db9e454b72b522f0d5852f58417eb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29064e2ffd89dbe09bcc4ffc9ab2cbe0342db9e454b72b522f0d5852f58417eb?s=96&d=mm&r=g","caption":"Pedro Santos"},"description":"Designer","url":"https:\/\/boomer.pt\/raiodoblog\/author\/pedro-santos\/"}]}},"_links":{"self":[{"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/posts\/14900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/comments?post=14900"}],"version-history":[{"count":1,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/posts\/14900\/revisions"}],"predecessor-version":[{"id":26112,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/posts\/14900\/revisions\/26112"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/media\/14902"}],"wp:attachment":[{"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/media?parent=14900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/categories?post=14900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/tags?post=14900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}