Curso IT Fundamentos CSS 031_Layout de grade Grid

Layout de grade Grid

A grade é um padrão de layout composto por uma série de linhas horizontais e verticais. Com base na grade, podemos organizar elementos de design, ajudando-nos a projetar uma série de páginas com elementos de posição e largura fixas, tornando nossas páginas de sites mais unificadas.

Uma grade geralmente possui muitas colunas (column) e linhas (row), bem como lacunas entre linhas e linhas, colunas e colunas, essa lacuna é geralmente chamada de calha (gutter).

Efeito do exemplo

Conceitos básicos

O layout Grid é composto pelos seguintes conceitos básicos:

Container de grade (grid container): O layout de grade é composto por container de grade e itens de grade. O container de grade é o container que coloca os itens de grade na grade. O container de grade pode ser qualquer elemento, mas geralmente usa o elemento div.
Item de grade (grid item): O item de grade é o elemento colocado no container de grade. O item de grade pode ser qualquer elemento, mas geralmente usa o elemento div.
Linha de grade (grid line): A linha de grade é a linha que divide o container de grade em linhas e colunas. A linha de grade pode ser horizontal ou vertical.
Coluna de grade (grid column): A coluna de grade é a linha vertical no container de grade.
Linha de grade (grid row): A linha de grade é a linha horizontal no container de grade.

Propriedades comuns

Propriedades do container de grade

O container de grade possui as seguintes propriedades para controlar o layout de grade:

display: Define o modo de exibição do container de grade. O container de grade deve ser definido como display: grid ou display: inline-grid para usar o layout de grade.
grid-template-columns: Define o número de colunas e a largura da coluna do container de grade (usando unidades como fr, px, em, etc.).
grid-template-rows: Define o número de linhas e a altura da linha do container de grade (usando unidades como fr, px, em, etc.).
grid-template: Define grid-template-columns e grid-template-rows ao mesmo tempo.
grid-auto-columns: Define a largura da coluna do container de grade.
grid-auto-rows: Define a altura da linha do container de grade.

Propriedades do item de grade

O item de grade possui as seguintes propriedades para controlar o layout do item de grade na grade:

grid-column: Define a coluna onde o item de grade está localizado.
grid-row: Define a linha onde o item de grade está localizado.
grid-column-start: Define a posição inicial do item de grade na coluna.
grid-column-end: Define a posição final do item de grade na coluna.
grid-row-start: Define a posição inicial do item de grade na linha.
grid-row-end: Define a posição final do item de grade na linha.
grid-area: Define a área onde o item de grade está localizado.
grid-gap: Define o espaçamento entre as linhas de grade.

Layout de grade

Definir larguras de coluna e alturas de linha fixas e adaptáveis

Exemplo:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* Primeira coluna 100px, segunda coluna 200px, espaço restante alocado para coluna adaptável */
5
    grid-template-rows: 100px 200px auto;
6
    /* Primeira linha 100px, segunda linha 200px, espaço restante alocado para linha adaptável */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demonstração Grid</div>
3
        <div class="item">Demonstração Grid</div>
4
        <div class="item">Demonstração Grid</div>
5
        <div class="item">Demonstração Grid</div>
6
        <div class="item">Demonstração Grid</div>
7
        <div class="item">Demonstração Grid</div>
8
        <div class="item">Demonstração Grid</div>
9
        <div class="item">Demonstração Grid</div>
10
        <div class="item">Demonstração Grid</div>
11
    </div>

Efeito:

Efeito do exemplo Usar porcentagem para definir largura de coluna e altura de linha

Exemplo:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* Primeira coluna ocupa 30%, segunda coluna ocupa duas partes do espaço restante, terceira coluna ocupa uma parte do espaço restante */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* Primeira linha ocupa 30%, segunda linha ocupa duas partes do espaço restante, terceira linha ocupa uma parte do espaço restante */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demonstração Grid</div>
3
        <div class="item">Demonstração Grid</div>
4
        <div class="item">Demonstração Grid</div>
5
        <div class="item">Demonstração Grid</div>
6
        <div class="item">Demonstração Grid</div>
7
        <div class="item">Demonstração Grid</div>
8
        <div class="item">Demonstração Grid</div>
9
        <div class="item">Demonstração Grid</div>
10
        <div class="item">Demonstração Grid</div>
11
    </div>

Efeito:

Efeito do exemplo Divisão igual (distribuição média) da largura da coluna e altura da linha

Exemplo:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Três colunas iguais, cada coluna ocupa uma parte do espaço restante */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* Três linhas iguais, cada linha ocupa uma parte do espaço restante */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demonstração Grid</div>
3
        <div class="item">Demonstração Grid</div>
4
        <div class="item">Demonstração Grid</div>
5
        <div class="item">Demonstração Grid</div>
6
        <div class="item">Demonstração Grid</div>
7
        <div class="item">Demonstração Grid</div>
8
        <div class="item">Demonstração Grid</div>
9
        <div class="item">Demonstração Grid</div>
10
        <div class="item">Demonstração Grid</div>
11
    </div>

Efeito:

Efeito do exemplo Usar minmax para definir largura e altura mínima e máxima de colunas e linhas

Exemplo:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* Primeira coluna largura mínima 100px, ocupa uma parte do espaço restante; segunda coluna largura mínima 200px, ocupa duas partes do espaço restante */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* Primeira linha altura mínima 100px, ocupa uma parte do espaço restante; segunda linha altura mínima 200px, ocupa duas partes do espaço restante */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demonstração Grid</div>
3
        <div class="item">Demonstração Grid</div>
4
        <div class="item">Demonstração Grid</div>
5
        <div class="item">Demonstração Grid</div>
6
    </div>

Efeito:

Efeito do exemplo

Espaçamento de grade

O espaçamento de grade é controlado por duas propriedades: grid-row-gap e grid-column-gap. Além disso, o CSS Grid Level 2 introduziu a propriedade gap, que pode controlar simultaneamente grid-row-gap e grid-column-gap.

Exemplo:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* Espaçamento entre linhas de 50px */
6
    grid-column-gap: 30px; /* Espaçamento entre colunas de 30px */
7
    /* gap: 50px 30px; Espaçamento entre linhas de 50px, espaçamento entre colunas de 30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">Demonstração Grid</div>
3
        <div class="item">Demonstração Grid</div>
4
        <div class="item">Demonstração Grid</div>
5
        <div class="item">Demonstração Grid</div>
6
        <div class="item">Demonstração Grid</div>
7
        <div class="item">Demonstração Grid</div>
8
    </div>

Efeito:

Efeito do exemplo

Posicionamento de grade

O posicionamento de grade geralmente se refere ao uso de propriedades como grid-column, grid-row e grid-area para posicionar itens no layout de grade. Essas propriedades são usadas para especificar as colunas e linhas ocupadas pelo item na grade ou especificar diretamente a área onde o item está localizado.

grid-column é uma propriedade usada para definir as colunas que um item de grade ocupa. É uma abreviação de grid-column-start e grid-column-end. Com grid-column, você pode definir mais convenientemente a posição do item de grade na direção horizontal e o número de colunas que ele ocupa.
grid-row é uma propriedade usada para definir as linhas que um item de grade ocupa. É uma abreviação de grid-row-start e grid-row-end. Com grid-row, você pode definir mais convenientemente a posição do item de grade na direção vertical e o número de linhas que ele ocupa.
A propriedade grid-area é uma propriedade abreviada usada para definir simultaneamente as propriedades grid-row-start, grid-column-start, grid-row-end e grid-column-end. Com grid-area, você pode definir mais intuitivamente a posição e o tamanho de um item de grade no layout de grade.

Exemplo:

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Define 3 colunas, cada coluna ocupa 1 parte do espaço */
5
    grid-template-rows: repeat(2, 150px);
6
    /* Define 2 linhas, cada linha com altura de 150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* Posicionamento usando grid-column e grid-row */
17
.item1 {
18
    grid-column: 1 / 3; /* Da primeira coluna à terceira coluna(1+2 colunas) */
19
    grid-row: 1 / 2;    /* Da primeira linha à segunda linha(1 linha) */
20
}
21
/* Posicionamento usando grid-area */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* Da segunda linha segunda coluna à terceira linha quarta coluna(2 linhas)(2+3 colunas) */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

Efeito:

Efeito do exemplo

Exemplo:

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* Define duas colunas, primeira coluna ocupa uma parte, segunda coluna ocupa duas partes */
10
    grid-template-rows: auto;
11
    /* Define altura da linha, primeira e terceira linhas determinadas pelo conteúdo, segunda linha ocupa espaço restante */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* Define layout de área, cada área é representada por uma string, espaço separa células, quebra de linha indica nova linha */
17
    min-height: 100vh;
18
    /* Define altura mínima, garante que o footer seja visível mesmo quando a altura do conteúdo é menor que a viewport */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* Coloca .header na área chamada "header" */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* Coloca .sidebar na área chamada "sidebar" */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* Coloca .main na área chamada "main" */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* Coloca .footer na área chamada "footer" */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>

Efeito:

Efeito do exemplo

Layout de grade Grid

Conceitos básicos

Propriedades comuns

Layout de grade

Espaçamento de grade

Posicionamento de grade

Comentários