Começando com o novo CSS Grid Layout \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 11 Horas 45 Min 38 Seg Tempo restante da oferta: 11 45 38 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Começando com o novo CSS Grid Layout [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Começando com o novo CSS Grid Layout Aprenda um pouco mais sobre o CSS Grid Layout, agora com suporte completo pelo Firefox e Chrome. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/grid-layout.png) Olá, Web Developers! Chrome e Firefox finalmente lançaram uma atualização onde há **suporte total** à especificação de CSS Grid Layout. Antes esse suporte era apenas parcial. > “Ué, mas já fazemos isso com ferramentas como 960gs, unsemantic e bootstrap há muito tempo.” Sim, mas para isso é necessário colocar uma biblioteca inteira no nosso projeto apenas para utilizarmos uma meia dúzia de classes. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) Essa especificação indica propriedades que nos ajudam a criar grids diretamente no nosso CSS, e mais algumas facilidades que às vezes é chatinho de se fazer. > “Mas não criaram o FlexBox para facilitar exatamente a criação de layouts?” A ideia principal do **FlexBox** é ajudar a trabalhar com uma coluna. Então podemos utilizá-lo para organizar itens dentro de uma coluna mas, para trabalhar com várias colunas, as **Grids** podem ser mais úteis. Isso porque com as Grids podemos indicar quantas colunas ficarão disponíveis para cada tamanho de tela, fazendo com que fique mais fácil indicarmos quando um elemento deve ir para baixo ou para outro lugar se estivermos em uma tela menor. Também podemos indicar o número de linhas. [ ![Spring Framework - Spring Security](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/spring-boot.svg) Curso Spring Framework - Spring Security Conhecer o curso ](https://www.treinaweb.com.br/curso/spring-framework-spring-security) ## Começando com Grids Primeiro vamos começar com um HTML bem simples, que utilizaremos para todos os nossos exemplos. Temos basicamente dois tipos de elementos: o container e os itens. ```html a b c e f g h ``` E agora um CSS bem simples: ```css .container{ display: grid; background-color: rgba(0,0,0,0.5); height: 300px; grid-template-columns: 40px 80% auto; grid-template-rows: 30px 20% auto; } .item{ border: 1px solid black; background-color: white; } ``` O que fizemos aqui? Na classe `.item` eu apenas coloquei uma borda e uma cor de fundo para podermos enxergar melhor cada item. Na classe `.container` é que fizemos a brincadeira. Coloquei uma cor apenas para podermos ver onde está os limites do container. Para começar a utilizar o Grid Layout, o nosso container têm que ter o `display` com o valor `grid`. Isso irá criar grids do tipo `block`. Também há o `inline-grid` para criar grids do tipo `inline` e o `subgrid`, que serve para quando o container de uma grid também é um item de outro container de grid. Em seguida conhecemos dois novos amigos: `grid-template-columns` e `grid-template-rows`. Em `grid-template-columns` nós passamos as medidas que queremos para cada coluna. Se quiser acrescentar uma coluna nova é só adicionar um novo valor ali. No exemplo passamos uma coluna com uma medida em `px` e outra em `%`. A última colocamos `auto`. Este valor faz com que o elemento preencha todo o espaço restante. Em `grid-template-rows` temos exatamente a mesma coisa, mas para linhas. Como no CSS precisamos que o container possua uma altura definida para que alturas dinâmicas funcionem, passei um valor fixo de 300px. Assim os valores em % e auto irão funcionar. *(Para o exemplo abaixo funcionar, certifique-se de estar utilizando a última versão do Chrome ou Firefox.)* Só com isso já poderíamos parar por aqui. Já tá bonito! Mas vamos ver um pouco mais. Podemos também nomear cada coluna ou linha: ```css .container{ /***********/ grid-template-columns: [primeira] 40px [col_2] 80% [ultima] auto; /***********/ } ``` Para isso, basta colocar o nome desejado entre `[]` antes da medida da coluna/linha. Caso queira repetir um valor um determinado número de vezes, podemos utilizar a função `repeat()`: ```css .container{ /***********/ grid-template-columns: repeat(3, 20px) auto; /***** equivalente a ******/ grid-template-columns: 20px 20px 20px auto; } ``` > “Mas e esse ‘auto’ aí? Tem como ter mais controle sobre o espaço disponível?” Tem sim. Temos uma unidade de medida chamada `fr`. Ela indica uma fração do espaço disponível em uma grid. ```css .container{ /***********/ grid-template-columns: 1fr 50px 2fr; /***********/ } ``` Os valores que não são dinâmicos são calculados primeiro. Então no exemplo acima, primeiro é calculado o “50px”. Depois é calculado o espaço disponível e então ele é distribuído para as frações que indicamos. No nosso caso, colocamos `1fr` e depois `2fr`, o que totaliza `3fr`. A primeira coluna ficará com 1/3 e a última ficará com `2/3` do espaço disponível. E não precisamos indicar uma medida fixa para o `fr` funcionar. ```css .container{ /***********/ grid-template-columns: 1fr 1fr 1fr; /***********/ } ``` No código acima, cada uma das colunas ficará com `1/3` do espaço disponível. Bom, essa foi apenas um introdução ao Grid Layout. Ainda há muito mais o que se aprender. E você? Já utilizava o Grid Layout antes de ser lançado? Se não conhecia, gostou ou achou mais difícil? Compartilhe com a gente aí nos comentários! [ ![R - Visualização e apresentação de dados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/r.svg) Curso R - Visualização e apresentação de dados Conhecer o curso ](https://www.treinaweb.com.br/curso/r-visualizacao-e-apresentacao-de-dados) - [ #Desenvolvimento ](https://www.treinaweb.com.br/blog/tag/desenvolvimento) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/Formas_de_se_trabalhar_com_o_Bootstrap_5-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Formas de se trabalhar com Bootstrap 5 ](https://www.treinaweb.com.br/blog/formas-de-se-trabalhar-com-bootstrap-5) Existem algumas maneiras diferentes de se trabalhar com Bootstrap em nossos projetos, vamos descobrir todas as formas do uso do framework. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/MEDIA-QUERIES-2-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Media Query. Colocando em prática seu uso. ](https://www.treinaweb.com.br/blog/media-query-colocando-em-pratica-seu-uso) Neste artigo, nós iremos aprender sobre o uso de Media Query no CSS3, na prática aprendendo como utilizar na criação de cards responsivos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/Como_instalar_e_utilizar_o_Bootstrap_via_npm-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Como instalar e utilizar o Bootstrap via npm ](https://www.treinaweb.com.br/blog/como-instalar-e-utilizar-o-bootstrap-via-npm) Instalar Bootstrap via npm e alterar suas variáveis, é mais simples do que imagina. Hoje iremos juntos fazer o download do Bootstrap 5. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/PRE-PROCESSADORES-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Os Pré-Processadores CSS ](https://www.treinaweb.com.br/blog/os-pre-processadores-css) Nesse artigo veremos o que são, pra que servem e quais os pré-processadores CSS mais utilizados. Aprenda a dar super poderes ao CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071147/intro-svg-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-1) Aprenda a começar a trabalhar com SVG para a criação de formas e efeitos no Front-End. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071214/front-end-motion-graphics-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 3 - Animações com mo.js (Motion Graphics) ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-3-animacoes-com-mo-js-motion-graphics) Aprenda a criar animações incríveis e interativas de forma bem simples para a web utilizando o mo.js Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/05145511/444-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ Barra de progresso que muda de tamanho e cor com apenas uma variável do CSS ](https://www.treinaweb.com.br/blog/barra-de-progresso-que-muda-de-tamanho-e-cor-com-apenas-uma-variavel-do-css) Veremos como aproveitar variáveis do CSS para criar uma barra de progresso bem simples e controlar sua largura e cor usando apenas uma variável. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/atributos-html-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Entendendo os atributos HTML ](https://www.treinaweb.com.br/blog/entendendo-os-atributos-html) No artigo de hoje, veremos algo que está muito presente no mundo da programação, atributos. Por que são tão importantes para o Front-End? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/01113921/1-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ Truques de como selecionar o n-ésimo item com CSS usando a pseudo-classe :nth-child ](https://www.treinaweb.com.br/blog/truques-de-como-selecionar-o-n-esimo-item-com-css-usando-a-pseudo-classe-nth-child) Veja como selecionar um ou mais elementos em um grupo de elementos usando a pseudo-classe :nth-child. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/hospedage-e-dominio-400x280.png) [ Computação em nuvem ](https://www.treinaweb.com.br/blog/categoria/computacao-em-nuvem) 10 anos atrás ## [ O que é uma hospedagem e por que precisamos de um domínio? ](https://www.treinaweb.com.br/blog/o-que-e-uma-hospedagem-e-por-que-precisamos-de-um-dominio) Nesse artigo veremos de forma didática, com foco nos iniciantes, o que é uma hospedagem, domínio e qual caminho o usuário percorre até chegar em um site. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **11h 45min 38s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58