{"id":769,"date":"2024-04-27T09:46:08","date_gmt":"2024-04-27T12:46:08","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=769"},"modified":"2025-11-08T10:11:25","modified_gmt":"2025-11-08T13:11:25","slug":"css-grid","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/","title":{"rendered":"CSS Grid"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>CSS Grid<\/strong>: O <strong>CSS Grid Layout<\/strong> \u00e9 o sistema de layout mais avan\u00e7ado do CSS. Diferente do Flexbox (que organiza elementos em uma \u00fanica dimens\u00e3o \u2014 linha <em>ou<\/em> coluna), o Grid permite que voc\u00ea organize e posicione elementos em <strong>duas dimens\u00f5es simult\u00e2neas<\/strong> (linhas <strong>e<\/strong> colunas).<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Essa capacidade bidimensional elimina a necessidade de hacks antigos (como <code>float<\/code>) e oferece uma maneira robusta e intuitiva de criar <em>layouts<\/em> de p\u00e1ginas inteiras, complexos e totalmente responsivos.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo, vamos mergulhar nas propriedades essenciais do Grid, separando-as didaticamente entre as regras aplicadas ao <strong>Container<\/strong> (a grade) e as regras aplicadas aos <strong>Itens<\/strong> (os filhos da grade).<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">1. O Grid Container: Definindo a Grade (Pai)<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Para iniciar o Grid, voc\u00ea deve aplicar <code>display: grid<\/code> ao elemento pai, tornando-o um <em>Grid Container<\/em>. Em seguida, voc\u00ea define a estrutura de linhas e colunas.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">A. Estrutura da Grade<\/h3>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Propriedade<\/strong><\/td><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><td><strong>Valores Comuns<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>display: grid<\/code><\/strong><\/td><td>Define o elemento como um <strong>container de grade<\/strong>.<\/td><td><code>grid<\/code><\/td><\/tr><tr><td><strong><code>grid-template-columns<\/code><\/strong><\/td><td>Define a <strong>largura<\/strong> das colunas e o <strong>n\u00famero<\/strong> de colunas.<\/td><td><code>1fr 1fr 1fr<\/code> (tr\u00eas colunas iguais)<\/td><\/tr><tr><td><strong><code>grid-template-rows<\/code><\/strong><\/td><td>Define a <strong>altura<\/strong> das linhas e o <strong>n\u00famero<\/strong> de linhas.<\/td><td><code>100px auto 1fr<\/code> (fixa, autom\u00e1tica, flex\u00edvel)<\/td><\/tr><tr><td><strong><code>gap<\/code><\/strong> (ou <code>grid-gap<\/code>)<\/td><td>Adiciona espa\u00e7amento entre linhas e colunas (o <em>gutter<\/em>).<\/td><td><code>10px<\/code> (para ambos); <code>10px 20px<\/code> (linha, coluna)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd11 A Unidade <code>fr<\/code> (Fractional Unit)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A unidade <strong><code>fr<\/code><\/strong> \u00e9 exclusiva do Grid e a chave para layouts flex\u00edveis.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><code>1fr<\/code> representa uma <strong>fra\u00e7\u00e3o igual<\/strong> do espa\u00e7o dispon\u00edvel no container.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Exemplo:<\/strong> <code>grid-template-columns: 2fr 1fr;<\/code> cria duas colunas. A primeira coluna ocupa o dobro do espa\u00e7o da segunda (propor\u00e7\u00e3o 2:1).<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udee0\ufe0f Fun\u00e7\u00f5es Avan\u00e7adas<\/h3>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Fun\u00e7\u00e3o<\/strong><\/td><td><strong>Uso<\/strong><\/td><td><strong>Exemplo<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>repeat()<\/code><\/strong><\/td><td>Simplifica a cria\u00e7\u00e3o de colunas\/linhas repetidas.<\/td><td><code>repeat(5, 1fr)<\/code> (cinco colunas de 1fr)<\/td><\/tr><tr><td><strong><code>minmax()<\/code><\/strong><\/td><td>Define um tamanho m\u00ednimo e um tamanho m\u00e1ximo para uma trilha (\u00f3timo para responsividade).<\/td><td><code>minmax(200px, 1fr)<\/code> (m\u00ednimo 200px, mas pode expandir at\u00e9 1fr)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">B. Layout por \u00c1reas Nomeadas<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A propriedade <strong><code>grid-template-areas<\/code><\/strong> permite que voc\u00ea visualize e desenhe seu layout diretamente no CSS, atribuindo nomes l\u00f3gicos a c\u00e9lulas ou grupos de c\u00e9lulas:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n    display: grid;\n    grid-template-areas:\n        \"header header header\"\n        \"nav    content  aside\"\n        \"footer footer footer\";\n}\n\/* Uma c\u00e9lula vazia \u00e9 representada por um ponto (.) *\/\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">2. Grid Items: Posicionando e Span (Filhos)<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Os elementos filhos diretos do Grid Container s\u00e3o chamados de <em>Grid Items<\/em>. Eles s\u00e3o posicionados na grade de duas maneiras principais: por linhas\/colunas ou por \u00e1reas nomeadas.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">A. Posicionamento por Linhas e Colunas (Num\u00e9rico)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Voc\u00ea pode fazer um item abranger v\u00e1rias trilhas usando n\u00fameros de linha:<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Propriedade<\/strong><\/td><td><strong>Sintaxe<\/strong><\/td><td><strong>Descri\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong><code>grid-column<\/code><\/strong><\/td><td><code>[start] \/ [end]<\/code><\/td><td>O item come\u00e7a na linha vertical <code>[start]<\/code> e termina antes da linha vertical <code>[end]<\/code>.<\/td><\/tr><tr><td><strong><code>grid-row<\/code><\/strong><\/td><td><code>[start] \/ [end]<\/code><\/td><td>O item come\u00e7a na linha horizontal <code>[start]<\/code> e termina antes da linha horizontal <code>[end]<\/code>.<\/td><\/tr><tr><td><strong><code>span<\/code><\/strong><\/td><td><code>span [count]<\/code><\/td><td>Faz o item ocupar <code>[count]<\/code> n\u00famero de trilhas.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Exemplo:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.item-largo {\n    \/* Come\u00e7a na linha 1 e ocupa 3 colunas (vai at\u00e9 a linha 4) *\/\n    grid-column: 1 \/ span 3;\n    \/* Ou, mais expl\u00edcito: grid-column: 1 \/ 4; *\/\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">B. Posicionamento por \u00c1reas Nomeadas<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Se voc\u00ea usou <code>grid-template-areas<\/code>, atribua o nome da \u00e1rea ao item:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.menu-principal {\n    grid-area: nav; \/* O item ocupar\u00e1 toda a \u00e1rea chamada 'nav' *\/\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">3. Vantagens do CSS Grid<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O Grid \u00e9 o pilar dos <em>layouts<\/em> modernos por causa de sua capacidade de:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Controle Bidimensional:<\/strong> Gerenciar linhas e colunas simultaneamente sem depender da ordem do HTML.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Layouts Complexos:<\/strong> Criar rapidamente o esqueleto principal de uma p\u00e1gina (cabe\u00e7alho, barra lateral, conte\u00fado) com alta previsibilidade.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Responsividade:<\/strong> A unidade <code>fr<\/code> e a fun\u00e7\u00e3o <code>minmax()<\/code> simplificam a adapta\u00e7\u00e3o a diferentes tamanhos de tela.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\u2705 Conclus\u00e3o CSS Grid<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O CSS Grid Layout n\u00e3o \u00e9 apenas uma ferramenta, \u00e9 uma nova filosofia de <em>layout<\/em>. Ao definir a estrutura de sua grade no Container (<code>grid-template-columns<\/code>, <code>grid-template-rows<\/code>) e posicionar seus Itens com clareza (<code>grid-area<\/code> ou <code>grid-column<\/code>), voc\u00ea transforma o <em>layout<\/em> de uma tarefa de c\u00e1lculo complexo para um simples exerc\u00edcio de design visual.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" alt=\"HTML\" class=\"wp-image-600\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" alt=\"CSS\" class=\"wp-image-702\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp\" alt=\"Javascript\" class=\"wp-image-804\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.webp\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.webp\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>CSS Grid: O CSS Grid Layout \u00e9 o sistema de layout mais avan\u00e7ado do CSS&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Grid - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"CSS Grid: Neste artigo, vamos explorar em detalhes o CSS Grid, suas principais propriedades e como utiliz\u00e1-lo para criar layouts incr\u00edveis...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/css-grid\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Grid - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"CSS Grid: Neste artigo, vamos explorar em detalhes o CSS Grid, suas principais propriedades e como utiliz\u00e1-lo para criar layouts incr\u00edveis...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/css-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-27T12:46:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-08T13:11:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"CSS Grid\",\"datePublished\":\"2024-04-27T12:46:08+00:00\",\"dateModified\":\"2025-11-08T13:11:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/\"},\"wordCount\":607,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/\",\"name\":\"CSS Grid - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-27T12:46:08+00:00\",\"dateModified\":\"2025-11-08T13:11:25+00:00\",\"description\":\"CSS Grid: Neste artigo, vamos explorar em detalhes o CSS Grid, suas principais propriedades e como utiliz\u00e1-lo para criar layouts incr\u00edveis...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/css-grid\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Grid - BLOG THIAGO ROSSI","description":"CSS Grid: Neste artigo, vamos explorar em detalhes o CSS Grid, suas principais propriedades e como utiliz\u00e1-lo para criar layouts incr\u00edveis...","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:\/\/thiagorossi.com.br\/blog\/css-grid\/","og_locale":"pt_BR","og_type":"article","og_title":"CSS Grid - BLOG THIAGO ROSSI","og_description":"CSS Grid: Neste artigo, vamos explorar em detalhes o CSS Grid, suas principais propriedades e como utiliz\u00e1-lo para criar layouts incr\u00edveis...","og_url":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-27T12:46:08+00:00","article_modified_time":"2025-11-08T13:11:25+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"CSS Grid","datePublished":"2024-04-27T12:46:08+00:00","dateModified":"2025-11-08T13:11:25+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/"},"wordCount":607,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/","url":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/","name":"CSS Grid - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-27T12:46:08+00:00","dateModified":"2025-11-08T13:11:25+00:00","description":"CSS Grid: Neste artigo, vamos explorar em detalhes o CSS Grid, suas principais propriedades e como utiliz\u00e1-lo para criar layouts incr\u00edveis...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/css-grid\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/css-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Grid"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=769"}],"version-history":[{"count":1,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/769\/revisions"}],"predecessor-version":[{"id":4453,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/769\/revisions\/4453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}