Criando a estrutura de um Layout com CSS Grid e Flexbox \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 48 Min 50 Seg Tempo restante da oferta: 14 48 50 [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) Criando a estrutura de um Layout com CSS Grid e Flexbox [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Criando a estrutura de um Layout com CSS Grid e Flexbox Nesse artigo vamos aprender sobre as funcionalidades CSS Grid e FlexBox do CSS na pratica durante o desenvolvimento de layout. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 5 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox.png.png) ## O que é e quando usar flex-box e CSS Grid layout. O [CSS Grid e os flexbox](https://www.treinaweb.com.br/blog/flexbox-ou-css-grid "CSS Grid e os flexbox") são ferramentas do CSS criadas para facilitar o posicionamento e a manipulação de elementos no HTML. A recomendação para utilização do [CSS Grid](https://www.treinaweb.com.br/blog/comecando-com-o-novo-css-grid-layout "CSS Grid") é para ser aplicado quando formos utilizar elementos em duas dimensões (ex. linhas e colunas), como o layout de uma página. Já o flexbox é mais recomendado para ser utilizado quando formos trabalhar em apenas uma dimensão, seja ela tanto vertical quanto horizontal. Vamos ver na prática. ## O laytout que vamos desenvolver. [ ![HTML5 + CSS3 - Primeiros passos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Primeiros passos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-primeiros-passos) Vamos desenvolver um layout simples, porém que permitirá conhecer as ferramentas na prática, além de mostrar a parte da responsividade. Ele foi feito com a utilização do CSS Grid, que como foi citado acima, a ferramenta facilita essa manipulação em duas dimensões. A parte do rodapé o “footer” foi feita com flexbox seguindo o recomendado, pois temos apenas uma dimensão. Veja como ficará a estrutura do nosso Layout: Telas grandes (desktop) ![Imagem de como vai ficar o layout desenvolvido em um desktop](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/img_desktop.png) Telas intermediárias (tablet) ![Imagem de como vai ficar o layout desenvolvido em um tablet](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/img_tablet.png) Telas Pequenas (smartphone) ![Imagem de como vai ficar o layout desenvolvido em um celular](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/img_mobile.png) ## Estrutura do documento HTML Para criar esse layout fizemos um HTML bem simples, com um cabeçalho, conteúdo principal, barra lateral e rodapé divido em três partes. ```html Document Header conteudo sidebar parte 1 parte 2 parte 3 ``` ## Explicação passo a passo CSS [ ![HTML5 + CSS3 - Dominando o CSS Grid Layout](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Dominando o CSS Grid Layout Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-css-grid-layout) Primeira coisa que vamos fazer é “zerar” algumas propriedades que vem automaticamente definida quando se inicia um documento HTML, como `padding` e `margin`. Vamos também fazer algumas alterações no texto, como, deixar o itálico, aumentar o tamanho da letra, alterar a cor e centralizar. ```css body, p { padding: 0; margin: 0; font-size: 1.5rem; /* tamanho da fonte */ font-style: italic; /* estilo */ color: rgb(80, 78, 78); /* cor do texto */ text-align: center; /* alinhamento */ } ``` Após isso vamos criar uma classe principal para englobar todo nosso documento e dividir o nosso rodapé, eu dei o nome de “principal” e o rodapé dei os nomes de “parte1”, “parte2” e “parte3” para facilitar na compreensão. ```html Header conteudo sidebar parte 1 parte 2 parte 3 ``` Agora no nosso CSS chamamos a nossa classe e a declaramos como grid, que é o formato que vamos utilizar no nosso layout. Note que foi declarado um `width` de 80% apenas para o conteúdo não ficar colado nas laterais. ```css .principal { width: 80%; margin: 0 auto; display: grid; } ``` Agora precisamos definir as colunas e linhas do nosso grid, para isso, chamamos as propriedades `grid-template-columns` e `grid-template-rows`, para declararmos as medidas que queremos em nosso `grid-template`. Podemos também dar nomes aos espaços que criamos com a propriedade `grid-template-areas`. ```css .principal { width: 80%; margin: 0 auto; display: grid; grid-template-columns: 75% 25%; grid-template-rows: 100px 450px 150px; grid-template-areas: "cabecalho cabecalho" "secao barra-lateral" "rodape rodape"; } ``` Com os nomes de nossas áreas declaradas, agora é só denominar o que vamos colocar em cada um dos espaços com a propriedade `grid-area`. ```css .principal { width: 80%; margin: 0 auto; display: grid; grid-template-columns: 75% 25%; grid-template-rows: 100px 450px 150px; grid-template-areas: "cabecalho cabecalho" "secao barra-lateral" "rodape rodape"; } header { grid-area: cabecalho; background-color: #48CFE0; } section { grid-area: secao; background-color: #E05DA1; } aside { grid-area: barra-lateral; background-color: #E0D475; } footer { grid-area: rodape; } ``` Na parte do rodapé, vamos utilizar o flexbox. Para isso, a primeira coisa a se fazer é declarar `display: flex`. Em seguida, definimos o `justify-content` que é uma propriedade para conseguirmos alinhar os elementos da maneira que for necessário, no caso vamos usar o “space-evenly”, que faz o espaçamento igualmente entre os elementos do container. E com isso podemos definir o tamanho de cada parte do nosso footer nas suas próprias classes. ```css footer { grid-area: rodape; display: flex; justify-content: space-evenly; } .parte1, .parte2, .parte3 { width: 25%; background-color: #5de05e; } .parte2 { width: 50%; margin: 0 2px; } .parte3 { margin: 0; } ``` [ ![HTML5 + CSS3 - Dominando o Flexbox](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Dominando o Flexbox Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-flexbox) ### Telas menores Na parte de responsividade, primeiro vamos fazer as medidas para telas um pouco menores, como os tablets. Para isso vamos redeclarar nosso grid com apenas uma coluna. Em seguida, no `footer`, nós declaramos a seguinte propriedade: `flex-wrap:wrap;`. Essa propriedade diz ao navegador que quando a tela estiver pequena e não couber mais a `parte1` e `parte3` uma do lado da outra, ela vai jogar um dos elementos para baixo. Já na `parte2`, lembra que nas telas intermediárias ela deve ficar acima dos itens `parte1` e `parte3`? Para isso vamos colocar nosso rodapé um item acima com o flex, usando a propriedade `order: -1;`, para que ele suba uma posição. Veja como ficou o código CSS: ```css @media(max-width: 992px) { .principal { grid-template-columns: 100%; grid-template-areas: "cabecalho" "secao" "barra-lateral" "rodape"; } footer { display: flex; flex-wrap: wrap; text-align: center; } .parte1, .parte2, .parte3 { margin: 0; border: solid 1px #fff; width: 49%; } .parte2 { width: 100%; order: -1; } } ``` Para dispositivos com telas menores, como todo o corpo já está responsivo, basta alterar cada parte do nosso footer para voltar a ocupar 100% do tamanho do container e retomar a `parte2` para o lugar inicial dela com `order: initial;`. ```css @media(max-width: 768px) { body { margin: 0 15px; } .principal, .parte1, .parte2, .parte3 { width: 100%; } .parte2 { order: initial; } } ``` Todo o HTML e CSS explicado nesse artigo estará no nosso [repositório do github](https://github.com/treinaweb/exemplo-estrutura-layout-css-grid-e-flexbox). ## Dicas para saber mais sobre GRID e Flexbox Aqui no blog da Treinaweb, temos alguns cursos que podem te ajudar bastante a conhecer todas as propriedades, são eles: [HTML5 + CSS3 - Dominando o Flexbox](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-flexbox "HTML5 + CSS3 - Dominando o Flexbox") e [HTML5 + CSS3 - Dominando o CSS Grid Layout](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-css-grid-layout "HTML5 + CSS3 - Dominando o CSS Grid Layout"). ### Flexbox - [Guia interativo de Flexbox - parte 1](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-1-containers "Guia interativo de Flexbox - parte 1") - [Guia interativo de Flexbox - parte 2](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-2-itens "Guia interativo de Flexbox - parte 2") ### CSS Grid [ ![EmberJS - Criação de interfaces web](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ember.svg) Curso EmberJS - Criação de interfaces web Conhecer o curso ](https://www.treinaweb.com.br/curso/emberjs) - [Guia interativo de CSS Grid - parte 1](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-1-containers "[Guia interativo de CSS Grid - parte 1") - [Guia interativo de CSS Grid - parte 2](https://www.treinaweb.com.br/blog/css-grid-um-guia-interativo-parte-2-itens "Guia interativo de CSS Grid - parte 2") Também recomendamos 2 joguinhos muito legais para praticar um pouco sobre esse assunto. O primeiro é um [jogo onde você ajuda os sapinhos com Flexbox](https://flexboxfroggy.com/ "jogo onde você ajuda os sapinhos com Flexbox")e o segundo é um [jogo de plantação com CSS Grid](https://cssgridgarden.com/ "jogo de plantação com CSS Grid"). Ambos são muito didáticos e explicam as propriedades que podem ser utilizadas. - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #Flexbox ](https://www.treinaweb.com.br/blog/tag/flexbox) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #css grid ](https://www.treinaweb.com.br/blog/tag/css-grid) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## 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/2023/05/GUIA-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Guia da linguagem HTML ](https://www.treinaweb.com.br/blog/guia-da-linguagem-html) Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com a linguagem HTML . 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/2019/01/25164926/imagem-capa-curriculo-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 8 anos atrás ## [ Criando um Portfólio com o Pingendo ](https://www.treinaweb.com.br/blog/criando-um-portfolio-com-o-pingendo) Neste artigo veremos como criar uma pequena página web para que você possa utilizá-la como Portfólio utilizando a ferramenta Pingendo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/thymeleaf-reaproveitando-codigo-com-fragments-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf - Herança de Templates ](https://www.treinaweb.com.br/blog/thymeleaf-heranca-de-templates) Neste artigo veremos como implementar a herança de templates com os fragments parametrizados da template engine Thymeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/EXECUTAR-PRIMEIRO-CÓDIGO-JAVASCRIPT-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Como executar seu primeiro código JavaScript ](https://www.treinaweb.com.br/blog/como-executar-seu-primeiro-codigo-javascript) Vamos aprender e executar nosso primeiro código em JavaScript, entendendo sobre a utilização do console do navegador e ferramentas on-line. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/16094538/liquid-fluid-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Trabalhando com a template engine Liquid no ASP.NET Core ](https://www.treinaweb.com.br/blog/trabalhando-com-a-template-engine-liquid-no-asp-net-core) Em alguns projetos pode ser necessário substituir o Razor por outra engine template. Neste caso, aprenda como fazer esta substituição pelo Liquid. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/acessibilidade-em-projetos-web-como-pensar-desde-o-inicio-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Acessibilidade em projetos web: como pensar desde o início ](https://www.treinaweb.com.br/blog/acessibilidade-em-projetos-web-como-pensar-desde-o-inicio) Vamos falar sobre a importância e o impacto de iniciar um projeto web pensando em acessibilidade desde o início e as boas práticas que podem ser utilizadas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/TAILWIND-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é Tailwind CSS e como instalar via CDN? ](https://www.treinaweb.com.br/blog/o-que-e-tailwind-css-e-como-instalar-via-cdn) Neste artigo aprenderemos a criar um navbar usando Tailwind CSS, e entender melhor como funciona seus componentes de estilização. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/17135411/html-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 9 anos atrás ## [ O que é e como começar com HTML e CSS? ](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css) Quer iniciar seus estudos em HTML e CSS e não sabe por onde começar? Veja o que preparamos pra você. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/TEMPLATE-ENGINE-PUG-EXPRESS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Express com Template Engine PUG ](https://www.treinaweb.com.br/blog/express-com-template-engine-pug) Neste artigo vamos estruturar um projeto utilizando Express com o Template Engine PUG e entender as suas principais características. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/Gutenberg-Wordpress-400x280.png) [ CMS's e E-commerce ](https://www.treinaweb.com.br/blog/categoria/cmss-e-e-commerce) 6 anos atrás ## [ Como usar o novo editor Gutenberg do Wordpress ](https://www.treinaweb.com.br/blog/como-usar-o-novo-editor-gutenberg-do-wordpress) Saiba como utilizar o novo editor Gutenberg do Wordpress, que traz o sistema de blocos na criação de conteúdo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/o-que-e-ember-js-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ O que é Ember.js? ](https://www.treinaweb.com.br/blog/o-que-e-ember-js) Veja neste artigo o que é Ember.js. 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 **14h 48min 50s** - 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