INTRODUÇÃO AO CSS GRID: Um guia completo para iniciantes
Tags: webdev, programming, tutorial, artigo
Published: 2023-05-22 21:52:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h3bfefu90zlyz74a4v9.png)

### **Sumário**
- Resumo
- Introdução
- Desenvolvimento
- Conclusão


### **RESUMO**

Este artigo apresenta uma introdução completa ao CSS Grid para programadores iniciantes. O CSS Grid é um sistema de layout bidimensional que permite organizar conteúdo em linhas e colunas. Com o CSS Grid, é possível criar layouts avançados e responsivos com facilidade e adaptabilidade a diferentes tamanhos de tela. O artigo aborda como funciona, como criar uma grade, as principais propriedades e recursos, e destaca a importância do Grid na criação de layouts em páginas web.

**Palavras-chave: CSS Grid, layout bidimensional, responsividade, propriedades, recursos.**


### **INTRODUÇÃO**

O CSS Grid é uma das ferramentas mais poderosas e flexíveis do CSS moderno, permitindo aos desenvolvedores web criar layouts complexos e personalizados com facilidade. No entanto, muitos desenvolvedores iniciantes podem se sentir intimidados por sua complexidade aparente e podem ter dificuldade em começar a usá-lo em seus projetos. 

É uma tecnologia relativamente nova que foi adicionada ao CSS em 2017. Ele permite que os desenvolvedores criem layouts de página altamente personalizados e responsivos usando uma grade de células que podem ser dimensionadas e colocadas de várias maneiras. O Grid é particularmente útil para criar layouts complexos, como layouts de grade, layouts de revista e layouts de página inicial.

Portanto, se você está iniciando no mundo do desenvolvimento web e deseja explorar as possibilidades do CSS Grid, este guia é a sua porta de entrada para aprender a utilizar essa ferramenta poderosa e criar layouts impressionantes para suas páginas web.

Os objetivos deste guia são:

- Explicar os conceitos básicos;
- Mostrar como criar layouts simples;
- Demonstrar como criar layouts avançados;
- Oferecer dicas e truques úteis para usar com eficiência.


### **DESENVOLVIMENTO**


#### 1. Introdução ao CSS Grid

O CSS Grid é um sistema de layout bidimensional que permite organizar elementos em uma grade de linhas e colunas. Ele oferece uma maneira mais eficiente e intuitiva de criar layouts em comparação com outras técnicas tradicionais, como floats e posicionamento absoluto.

É composto por um conjunto de propriedades que permitem a criação de um grid. Essas propriedades incluem:

- display: grid: define o elemento como um container de grid;
- grid-template-columns: define o número e largura das colunas;
- grid-template-rows: define o número e altura das linhas;
- grid-template-areas: define as áreas do grid;
- grid-gap: define o espaço entre as células do grid;
- grid-column: define as colunas onde o elemento será posicionado;
- grid-row: define as linhas onde o elemento será posicionado.

#### 2. Como criar um grid

Para criar um grid com CSS, é necessário definir as colunas e linhas que serão utilizadas, bem como a área de cada célula do grid. Existem várias propriedades do CSS Grid que facilitam esse processo:

- **`display: grid`** define o elemento como um container de grid.
- **`grid-template-columns`** define o número e a largura das colunas.
- **`grid-template-rows`** define o número e a altura das linhas.
- **`grid-template-areas`** define as áreas do grid.
- **`grid-gap`** define o espaçamento entre as células do grid.

Veja abaixo exemplos de como usar os elementos acima:

##### 2.1 Definindo o número e largura das colunas

A propriedade grid-template-columns define o número e largura das colunas do grid. É possível definir as colunas de maneira absoluta, utilizando valores em píxeis, ou de maneira relativa, utilizando valores em porcentagem.

Por exemplo, para criar um grid com três colunas, onde a primeira tem 200 píxeis de largura, a segunda ocupa, 50% do espaço disponível e a terceira tem 100 píxeis de largura, podemos utilizar o seguinte código:

Código 1 — Definindo o número e largura das colunas

```jsx
.container {
	display: grid;
	grid-template-columns: 200px 50% 100px;
}
```

##### 2.2 Definindo o número e altura das linhas

Assim como as colunas, é possível definir o número e altura das linhas utilizando a propriedade grid-template-rows. É possível utilizar valores absolutos ou relativos para definir a altura das linhas.

Por exemplo, para criar um grid com duas linhas, onde a primeira tem 100 píxeis de altura e a segunda ocupa, 50% do espaço disponível, podemos utilizar o seguinte código:

Código 2 — Definindo o número e altura das linhas

```
.container {
	display: grid;
	grid-template-rows: 100px 50%;
}
```

##### 2.3 Definindo as áreas do grid

A propriedade grid-template-areas permite definir as áreas do grid. É possível criar áreas nomeadas que podem ser referenciadas para posicionar os elementos.

Por exemplo, podemos definir um grid com duas linhas e duas colunas e nomear as áreas da seguinte forma:

Código 3 — Definindo Grid
```
.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
		"header header",
		"main sidebar";
}
```

Nesse exemplo, temos quatro células no grid, nomeadas como "header", "main" e "sidebar". A primeira linha é formada pelas áreas "header" e "header", enquanto a segunda linha é formada pelas áreas "main" e "sidebar".

Podemos então posicionar os elementos dentro das áreas utilizando a propriedade grid-area e informando o nome da área correspondente. Por exemplo:

Código 4 — Posicionando Elementos

```
.header {
	grid-area: header;
}
.main {
	grid-area: main; 
}
.sidebar {
	grid-area: sidebar;
}
```

Dessa forma, o elemento com a classe "header" será posicionado na área nomeada como "header", o elemento com a classe "main" será posicionado na área nomeada como "main" e o elemento com a classe "sidebar" será posicionado na área nomeada como "sidebar".

É importante notar que as áreas do grid não precisam necessariamente ter o mesmo tamanho ou proporção. É possível definir áreas maiores ou menores e combiná-las de diversas formas para criar layouts complexos e personalizados. Além disso, as áreas do grid também podem se sobrepor, que permite criar efeitos interessantes de sobreposição de elementos.

#### 3. Responsividade com CSS Grid

Uma das principais vantagens do CSS Grid é sua capacidade de criar layouts responsivos. Com o CSS Grid, é possível definir diferentes configurações de grid para diferentes tamanhos de tela usando media queries.

Por exemplo, podemos alterar o layout do nosso exemplo anterior para se adaptar a telas menores. Suponha que desejamos que a barra lateral seja empilhada abaixo do conteúdo principal em telas estreitas. Podemos fazer isso adicionando uma nova configuração de grid dentro de uma media query:

```
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; /* uma única coluna */
  }
  .sidebar {
    grid-area: main; /* reposiciona a barra lateral para a área "main" */
  }
}
```

Neste exemplo, estamos aplicando uma nova configuração de grid quando a largura da tela for igual ou inferior a 600 píxeis. Nessa configuração, definimos apenas uma coluna flexível, fazendo com que a barra lateral seja empilhada abaixo do conteúdo principal.

#### 4. Dicas e truques úteis

Aqui estão algumas dicas úteis ao trabalhar com CSS Grid:

- Utilize as propriedades **`grid-template-columns`** e **`grid-template-rows`** para definir o tamanho e o número de colunas e linhas do grid.
- Experimente a propriedade **`grid-template-areas`** para criar layouts mais complexos, nomeando áreas do grid e posicionando elementos dentro delas.
- Utilize a propriedade **`grid-gap`** para adicionar espaçamento entre as células do grid.
- Explore outras propriedades do CSS Grid, como **`grid-column`** e **`grid-row`**, para posicionar elementos de maneira precisa.

#### 5. Exemplo prático

Vamos criar um exemplo prático para ilustrar como o CSS Grid funciona. Suponha que queremos criar um layout com uma área principal e uma barra lateral. Podemos fazer isso usando o CSS Grid da seguinte maneira:

```
<html>
	<div class="container">
	  <div class="main">Conteúdo principal</div>
	  <div class="sidebar">Barra lateral</div>
	</div>
</html>

CSS code

.container {
  display: grid;
  grid-template-columns: 1fr 200px; /* uma coluna flexível e uma coluna fixa */
  grid-gap: 20px; /* espaçamento entre as células */
}

.main {
  grid-area: main; /* posiciona o elemento na área "main" */
}

.sidebar {
  grid-area: sidebar; /* posiciona o elemento na área "sidebar" */
}

```

Nesse exemplo, definimos o container como um grid com duas colunas: uma coluna flexível e uma coluna fixa de 200 píxeis. Em seguida, posicionamos o conteúdo principal na área "main" e a barra lateral na área "sidebar". O espaçamento entre as células é de 20 píxeis.

### **CONCLUSÃO**

O CSS Grid é uma ferramenta poderosa e essencial para programadores iniciantes. Com ele, é possível criar layouts complexos e responsivos de forma fácil e intuitiva. Neste artigo, exploramos os conceitos básicos do CSS Grid, mostramos como criar um grid e destacamos a importância dessa tecnologia na criação de layouts em páginas web.

Espero que este guia completo para programadores iniciantes tenha ajudado você a compreender e utilizar o CSS Grid em seus projetos. Lembre-se de praticar e experimentar diferentes configurações para se familiarizar com essa ferramenta e criar layouts incríveis em suas páginas web.