Domine o CSS Grid: Crie Layouts Incríveis com Facilidade

O CSSO que é CSS?Descubra como o CSS transforma a aparência das páginas web, separando conteúdo de design para melhor organização e flexibilidade. Grid é um poderoso sistema de layout que permite criar estruturas bidimensionais (linhas e colunas) de forma simples e organizada. Ao contrário de outras técnicas de layout, como float ou FlexboxFundamentos do Flexbox: display: flex, flex-direction, flex-wrapDescubra como o Flexbox revoluciona seus layouts com display flex, flex-direction e flex-wrap. Aprenda a criar designs responsivos e organizados., o Grid foi desenhado especificamente para solucionar desafios de organização de elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. em linhas e colunas, otimizando a criação de layouts mais complexos.

Neste tutorial, vamos explorar os princípios básicos do CSS Grid, entendendo como funciona a propriedadeClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. display: grid e como definir colunas e linhas com grid-templateCriando e Gerenciando Templates DinâmicosAprenda a utilizar templates dinâmicos para criar interfaces web eficientes. Descubra técnicas com JavaScript puro integrando boas práticas e segurança.-columns e grid-templateCriando e Gerenciando Templates DinâmicosAprenda a utilizar templates dinâmicos para criar interfaces web eficientes. Descubra técnicas com JavaScript puro integrando boas práticas e segurança.-rows.

O que é display: grid?🔗

Para começar a criar um layout com Grid, precisamos informar ao navegador que o elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. será um grid container. Isso é feito definindo a propriedadeClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. display como grid. Assim, todos os elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. filhos desse container tornam-se grid items, passando a respeitar as configurações de linhas e colunas que você especificar posteriormente.

Exemplo básico de uso do display: grid:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: grid; /* Torna o container um grid */
  background-color: #f2f2f2; /* Exemplo de estilo */
}
.item {
  background-color: #ffcc00;
  border: 1px solid #999;
  padding: 10px;
  text-align: center;
}

Sem nenhuma configuração adicional, o Grid organizará automaticamente os itens. Porém, só veremos o verdadeiro poder dessa técnica ao definirmos o tamanho das colunas e/ou linhas.

Definindo colunas: grid-template-columns🔗

Para criar colunas, utilizamos grid-templateCriando e Gerenciando Templates DinâmicosAprenda a utilizar templates dinâmicos para criar interfaces web eficientes. Descubra técnicas com JavaScript puro integrando boas práticas e segurança.-columns. É possível definir o tamanho das colunas de diversas maneiras, como em px, % ou utilizando unidades fracionais (frGrid Responsivo: fr, minmax(), repeat()Descubra como criar grids flexíveis e responsivos com CSS Grid, explorando fr, minmax() e repeat() para layouts modernos em seu site.). Cada valor corresponde a uma coluna.

Por exemplo, se quisermos 3 colunas, sendo:

1. A primeira com larguraSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. fixa de 200px

2. A segunda ajustando-se de forma flexível com 1fr

3. A terceira também flexível com 1fr

Podemos fazer assim:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}

Dessa forma, o navegador:

Reserva 200px para a primeira coluna.
Divide o espaço restante igualmente entre as colunas definidas com 1fr.

Exemplo prático

<div class="container">
  <div class="item">Col 1</div>
  <div class="item">Col 2</div>
  <div class="item">Col 3</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 10px; /* Espaçamento entre colunas (e linhas também, se houver) */
  margin: 0 auto;
  max-width: 800px;
}
.item {
  background-color: #ffcc00;
  border: 1px solid #999;
  padding: 10px;
  text-align: center;
}

Dica: O uso de fr (frações) para criar colunas flexíveis é muito comum, pois facilita a criação de layouts responsivos e bem ajustados.

Definindo linhas: grid-template-rows🔗

Assim como definimos colunas, podemos definir linhas usando grid-templateCriando e Gerenciando Templates DinâmicosAprenda a utilizar templates dinâmicos para criar interfaces web eficientes. Descubra técnicas com JavaScript puro integrando boas práticas e segurança.-rows. A sintaxe é bem similar aos valores de grid-templateCriando e Gerenciando Templates DinâmicosAprenda a utilizar templates dinâmicos para criar interfaces web eficientes. Descubra técnicas com JavaScript puro integrando boas práticas e segurança.-columns.

Se quisermos duas linhas com alturas de 150px cada, podemos fazer:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Duas colunas para exemplo */
  grid-template-rows: 150px 150px;
}

Nesse caso, nosso container terá:

2 colunas (1fr para cada, totalizando 2 fraçõesGrid Responsivo: fr, minmax(), repeat()Descubra como criar grids flexíveis e responsivos com CSS Grid, explorando fr, minmax() e repeat() para layouts modernos em seu site. horizontais).
2 linhas (cada uma com 150px de alturaSeletores e Propriedades CSS EssenciaisAprenda a dominar o CSS com nosso tutorial completo: entenda seletores, propriedades essenciais e técnicas para criar layouts modernos e atrativos. fixa).

Exemplo prático

<div class="container">
  <div class="item">C1 L1</div>
  <div class="item">C2 L1</div>
  <div class="item">C1 L2</div>
  <div class="item">C2 L2</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px 150px;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
}
.item {
  background-color: #ffcc00;
  border: 1px solid #999;
  padding: 10px;
  text-align: center;
}

Observação: Se você tiver mais itens do que as células definidas, eles serão organizados automaticamente em novas linhas (sem altura definida), a menos que sejam especificadas regras adicionais.

Exemplo unindo colunas e linhas🔗

Para ver o Grid em ação de forma mais clara, podemos criar um container com 3 colunas e 2 linhas, mesclando valores em pixels e frGrid Responsivo: fr, minmax(), repeat()Descubra como criar grids flexíveis e responsivos com CSS Grid, explorando fr, minmax() e repeat() para layouts modernos em seu site.. Observe o pequeno exemplo abaixo:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
}
.item {
  background-color: #ffcc00;
  border: 1px solid #999;
  padding: 10px;
  font-weight: bold;
  display: flex; /* Apenas para centralizar o texto */
  justify-content: center;
  align-items: center;
}

Nesta configuração: