CodeGym/Cursos/Frontend SELF PT/Posicionamento Automático

Posicionamento Automático

Disponível

5.1 Propriedade grid-auto-rows

CSS Grid Layout oferece ótimas ferramentas para posicionar elementos automaticamente na grade. As propriedades grid-auto-rows, grid-auto-columns e grid-auto-flow ajudam a gerenciar o comportamento dos elementos que não estão posicionados explicitamente na grade. Vamos dar uma olhada mais de perto nessas propriedades.

A propriedade grid-auto-rows define a altura das linhas que são adicionadas automaticamente quando os elementos excedem as linhas definidas explicitamente.

Sintaxe:

.grid-container {
  grid-auto-rows: value;
}

Onde:

  • value: altura das linhas adicionadas automaticamente. Pode ser especificado em várias unidades de medida (px, %, fr, auto e etc.)

Exemplo 1: Altura fixa de linhas

Neste exemplo, todas as linhas adicionadas automaticamente terão altura fixa de 100px:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Três colunas de largura igual */
  grid-auto-rows: 100px; /* Linhas adicionadas automaticamente terão altura de 100px */
}

Exemplo 2: Altura flexível de linhas

Neste exemplo, as linhas adicionadas automaticamente terão altura mínima de 100px, mas podem crescer conforme necessário:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto); /* Altura mínima das linhas é 100px, mas podem crescer automaticamente */
}

5.2 Propriedade grid-auto-columns

A propriedade grid-auto-columns define a largura das colunas que são adicionadas automaticamente quando os elementos excedem as colunas definidas explicitamente.

Sintaxe:

.grid-container {
  grid-auto-columns: value;
}

Onde:

  • value: largura das colunas adicionadas automaticamente. Pode ser especificado em várias unidades de medida (px, %, fr, auto e etc.)

Exemplo 1: Largura fixa de colunas

Neste exemplo, todas as colunas adicionadas automaticamente terão largura fixa de 100px:

CSS
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px); /* Três linhas de altura fixa */
  grid-auto-columns: 100px; /* Colunas adicionadas automaticamente terão largura de 100px */
}

Exemplo 2: Largura flexível de colunas

Neste exemplo, as colunas adicionadas automaticamente terão largura mínima de 100px, mas podem aumentar até ocupar uma parte do espaço disponível:

CSS
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-columns: minmax(100px, 1fr); /* Largura mínima das colunas é 100px, mas podem aumentar para ocupar uma parte do espaço disponível */
}

5.3 Propriedade grid-auto-flow

A propriedade grid-auto-flow define como posicionar automaticamente os elementos na grade, que não estão definidos explicitamente com as propriedades grid-row e grid-column.

Sintaxe:

.grid-container {
  grid-auto-flow: value;
}

Onde:

value: valor que determina a ordem de posicionamento dos elementos. Os valores possíveis são:

  • row (padrão): os elementos são posicionados por linhas
  • column: os elementos são posicionados por colunas
  • dense: os elementos são posicionados com preenchimento denso, sem células vazias (usado junto com row ou column)

Exemplo 1: Posicionamento por linhas

Neste exemplo, os elementos serão posicionados por linhas, preenchendo uma linha após a outra:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row; /* Elementos são posicionados por linhas */
}

Exemplo 2: Posicionamento por colunas

Neste exemplo, os elementos serão posicionados por colunas, preenchendo uma coluna após a outra:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column; /* Elementos são posicionados por colunas */
}

Exemplo 3: Preenchimento denso

Neste exemplo, os elementos serão posicionados por linhas com preenchimento denso, minimizando o número de células vazias:

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense; /* Elementos são posicionados por linhas com preenchimento denso */
}

5.4 Exemplo de implementação completa

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Três colunas de largura igual */
  grid-auto-rows: 100px; /* Linhas adicionadas automaticamente terão altura de 100px */
  grid-auto-flow: row dense; /* Elementos são posicionados por linhas com preenchimento denso */
  gap: 10px;
}

.grid-item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border: 1px solid #fff;
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de posicionamento automático de elementos em CSS Grid</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">Elemento 1</div>
      <div class="grid-item">Elemento 2</div>
      <div class="grid-item">Elemento 3</div>
      <div class="grid-item">Elemento 4</div>
      <div class="grid-item">Elemento 5</div>
      <div class="grid-item">Elemento 6</div>
    </div>
  </body>
</html>

Explicação do código:

  • .grid-container: cria um contêiner de grid com três colunas de largura igual e linhas automáticas com altura de 100px. Os elementos são posicionados por linhas com preenchimento denso
  • .grid-item: define estilos básicos para os elementos da grade, como cor de fundo, cor do texto, padding, centralização do texto e borda
1
Tarefa
Frontend SELF PT,  nível 27lição 4
Bloqueado
Colunas auto flexíveis
Colunas auto flexíveis
1
Tarefa
Frontend SELF PT,  nível 27lição 4
Bloqueado
Auto-alocação por colunas
Auto-alocação por colunas
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário