Articles
Introdução ao CSS
Propriedades do CSS relacionadas ao layout de grades

Propriedades do CSS relacionadas ao layout de grades

Este artigo explica as propriedades do CSS relacionadas ao layout de grades.

Você pode aprender como descrever grid e grid em linha.

YouTube Video

HTML para Visualização

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

Layout de Grade

grid 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

Uma grade é um sistema de layout para alinhar elementos em linhas e colunas bidimensionais. Usando uma grade, você pode construir layouts complexos de forma fácil e flexível, o que era difícil com métodos tradicionais como float ou position. Enquanto o flexbox se destaca em layouts unidimensionais, a grade é adequada para layouts bidimensionais.

  • A classe grid-box aplica um layout de grade especificando grid na propriedade display. Este elemento é chamado de contêiner de grade.
  • A propriedade grid-template-columns especifica a largura das colunas da grade. Neste exemplo, a primeira coluna tem 100px, a segunda coluna tem 200px e a terceira coluna ocupa o espaço restante (auto).
  • A propriedade grid-template-rows especifica a altura das linhas da grade. A primeira linha tem 100px, a segunda linha é automática (auto) e a terceira linha tem 50px de altura.
  • A propriedade gap define o espaçamento entre os itens da grade. Adicionando 10px de espaço entre colunas e linhas.

Terminologia Básica

  1. Um contêiner de grade é um elemento com a propriedade display definida como grid, e seus filhos se tornam itens da grade.
  2. Os itens da grade são os elementos filhos colocados diretamente dentro de um contêiner de grade.

Principais propriedades de grade

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • As propriedades grid-template-columns e grid-template-rows definem o tamanho de cada coluna e linha.
  • Unidades como px e %, bem como fr (fração), podem ser usadas para especificar uma proporção do espaço restante.
    • Neste exemplo, há três colunas, e a segunda coluna tem o dobro da largura das outras.
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column e grid-row especificam em qual coluna ou linha o item da grade será colocado.
    • Neste exemplo, o item abrange da 2ª coluna até a 4ª coluna e da 1ª linha até a 3ª linha.
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows e grid-auto-columns são propriedades que controlam o tamanho das linhas e colunas geradas automaticamente quando as linhas ou colunas da grade não são explicitamente definidas.
    • Neste exemplo, 2 linhas e 2 colunas são explicitamente definidas, mas se mais elementos forem adicionados, novas linhas ou colunas serão geradas automaticamente de acordo com grid-auto-rows e grid-auto-columns.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Alinhar itens da grade horizontalmente (justify-items) e verticalmente (align-items).
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area especifica de uma vez a área do contêiner de grade onde o item de grade deve ser colocado.
    • Neste exemplo, significa ocupar da 1ª linha até a 3ª linha e da 2ª coluna até a 4ª coluna.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap adiciona espaço entre colunas e linhas. Você também pode especificar o espaçamento entre colunas e linhas individualmente usando column-gap e row-gap.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow é uma propriedade que define a direção em que os itens são colocados, seja por linha ou por coluna.

Exemplo de layouts complexos 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

Dessa forma, o grid permite que você crie todo o layout de uma página da web com código simples.

  • Neste exemplo, há três colunas (barra lateral, conteúdo principal e anúncio) e três linhas (cabeçalho, conteúdo e rodapé).
  • O cabeçalho e o rodapé ocupam toda a largura da página, com o conteúdo no centro e a barra lateral e o anúncio em ambos os lados.

Vantagens dos Grids

As vantagens do grid incluem os seguintes pontos:.

  • Layout bidimensional fácil: Gerenciar o layout em linhas e colunas permite atingir layouts complexos com menos código.
  • Compatível com design responsivo: O sistema de grid facilita a criação de designs responsivos que se adaptam a diferentes tamanhos de tela.

Propriedade gap 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

A propriedade gap é usada nos layouts de grid e flexbox para definir o espaçamento (lacunas) entre os elementos. Usando esta propriedade, você pode facilmente adicionar espaço entre elementos filhos.

  • Na classe gap-grid-container, um espaço de 30px na vertical e 10px na horizontal é definido entre cada elemento. Como uma grade de 3 colunas é criada com grid-template-columns, os espaços são aplicados vertical e horizontalmente entre cada elemento. Na classe gap-flex-container, um espaço de 50px é aplicado entre os três itens no flexbox.

Sintaxe Básica 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • O row-gap especifica o espaço entre as linhas. Este é o espaçamento vertical em layouts de grid ou flex.
  • O column-gap especifica o espaço entre as colunas. Este é o espaçamento horizontal.

Se dois valores não forem especificados, um único valor será aplicado tanto ao row-gap quanto ao column-gap.

Vantagens da propriedade gap

As vantagens da propriedade gap incluem o seguinte:.

  • Configuração simples de espaçamento: O código para definir espaços entre elementos filhos torna-se mais simples, eliminando a necessidade de definir margens ou preenchimentos extras entre elementos.
  • Adaptação flexível: Ele suporta facilmente design responsivo, permitindo ajustes flexíveis no design.

Propriedade grid-template-areas 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

A propriedade grid-template-areas fornece uma maneira de nomear áreas dentro de um contêiner de grid e usar esses nomes para posicionar facilmente os elementos do grid. Usar esta propriedade permite definições de layout visualmente intuitivas.

Elementos posicionados em áreas nomeadas especificadas pela propriedade grid-template-areas devem ter o mesmo nome atribuído com a propriedade grid-area. Mesmo que os elementos abranjam várias células, eles são automaticamente posicionados corretamente.

Neste exemplo, a grade é criada da seguinte forma:.

  • Na primeira linha, "header" é colocado ao longo de duas colunas.
  • "Sidebar" é colocado à esquerda e "content" à direita na segunda linha.
  • "Footer" é colocado ao longo de duas colunas na terceira linha.

Uso Básico 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

Na propriedade grid-template-areas, o nome da área é especificado para cada linha. Ao posicionar elementos em regiões com nomes atribuídos, você pode criar layouts facilmente. - Neste exemplo, uma grade com 2 linhas e 3 colunas é criada, e cada célula é nomeada como area1, area2, etc.

Definindo células vazias usando . 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

Se você deseja ter células vazias em seu layout, pode representá-las usando um . (ponto). - Como neste exemplo, ao especificar um . entre sidebar e content, a segunda coluna fica em branco.

Vantagens da propriedade grid-template-areas

As vantagens da propriedade grid-template-areas incluem os seguintes pontos:.

  • Layout visual: Permite expressar visualmente o layout, tornando mais fácil entender o design.
  • Fácil movimentação de elementos: É possível ajustar facilmente o layout dos elementos alterando as definições de área no CSS sem modificar o HTML.

Notas

Ao usar a propriedade grid-template-areas, é importante prestar atenção aos seguintes pontos:.

  • O número de nomes em cada linha deve corresponder ao número de colunas definidas.
  • Atribuir o mesmo nome a várias células irá mesclá-las, mas, ao atribuí-lo a linhas ou colunas diferentes, a área deve ser quadrada.

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid é um dos valores da propriedade display no CSS. Aplicar esta propriedade faz com que o elemento se comporte como um contêiner em nível de linha, criando internamente um contexto de formatação de grid. Diferentemente do display: grid, comporta-se como um elemento inline no fluxo do documento.

Casos de uso do inline-grid

inline-grid não é tão comum quanto grid, mas pode ser usado de forma eficaz em cenários específicos.

  • Grid dentro de um contexto inline: Útil quando você deseja posicionar uma grade ao lado de conteúdo de texto ou outros elementos inline. Por exemplo, é útil quando é necessária uma estrutura de grade para botões, badges, rótulos, etc., mas você deseja exibi-la inline sem interromper o fluxo do texto.

  • Controle de layout dentro de elementos inline: Mesmo quando layouts complexos são necessários em elementos inline como links, botões ou spans, o inline-grid pode gerenciar a estrutura interna com um layout de grade, evitando a exibição em bloco.

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

Nesse caso, o botão exibe ícones e texto em uma grade, permanecendo inline no fluxo do documento.

  • Componentes inline responsivos: O inline-grid pode ser usado para pequenos componentes que fazem parte do conteúdo inline e requerem um layout de grade. Por exemplo, é adequado para formulários inline, badges, rótulos de produto, etc., onde você deseja ajustar o layout com uma grade enquanto o mantém inline.

Alinhamento e dimensionamento do inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Como outros elementos inline, o inline-grid respeita o alinhamento vertical em relação ao conteúdo ao redor. Você pode controlar o alinhamento da grade usando a propriedade vertical-align.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • Em relação ao tamanho, um elemento inline-grid ocupa apenas a largura necessária para o conteúdo da sua grade. Se necessário, você pode definir explicitamente a largura, altura e dimensões mínimas/máximas.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Também é possível que o layout da própria grade determine o tamanho do contêiner inline-grid, e essa tendência é mais forte ao usar unidades flexíveis como fr, auto e porcentagens.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Propriedades CSS relacionadas ao FlexboxPropriedades CSS relacionadas ao layout de colunas