0Pricing
CSS Academy · Aula

Grade Implícita e Grid-Auto-Flow

Compreenda como o CSS Grid lida com itens além das trilhas explícitas usando linhas e colunas implícitas.

Grade Implícita e Grid-Auto-Flow é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Grade explícita vs. implícita

A grade explícita é definida por grid-template-columns e grid-template-rows. Quando os itens ultrapassam essas trilhas definidas, o navegador cria trilhas implícitas automaticamente.

grid-auto-rows

Define o tamanho das trilhas de linhas criadas implicitamente. Sem essa propriedade, as linhas implícitas recebem um tamanho que acomoda o conteúdo (auto).

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

grid-auto-rows com minmax

Faça com que as linhas implícitas tenham pelo menos uma determinada altura, mas possam se expandir:

  <div class="feed">
    <div>1</div><div>2</div><div>3</div>
  </div>

grid-auto-columns

Define os tamanhos das trilhas de colunas implícitas quando os itens são posicionados fora do intervalo explícito de colunas:

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

Controla como o algoritmo de posicionamento automático coloca os itens:

  • row (padrão) — posiciona em linhas, adicionando novas linhas conforme necessário
  • column — posiciona em colunas, adicionando novas colunas
  • row dense — preenche as lacunas de forma agressiva, retrocedendo quando necessário
  • column dense — faz um preenchimento denso na direção das colunas

grid-auto-flow: dense

dense faz com que o algoritmo tente preencher os espaços deixados por itens que abrangem várias trilhas. Isso pode fazer com que os itens apareçam fora da ordem.

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

Padrão de coluna com posicionamento automático

Faixa de cartões com rolagem horizontal, na qual as colunas crescem conforme necessário:

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

Preenchimento denso para galeria

Uma galeria de fotos com tamanhos variados que preenche as lacunas:

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

Grade implícita e áreas nomeadas

As áreas nomeadas só se aplicam à grade explícita. Os itens posicionados na grade implícita não podem usar diretamente o posicionamento por área nomeada — eles exigem posicionamento por número de linha ou por span.

Visualizando a grade implícita

No DevTools do Chrome, a sobreposição de layout mostra tanto as linhas explícitas (contínuas) quanto as implícitas (tracejadas) da grade. Isso ajuda a entender onde os itens posicionados automaticamente são colocados.

Controlando o tamanho implícito por item

Os itens que abrangem várias linhas na grade implícita precisam de grid-auto-rows para receber o tamanho correto. Sem essa propriedade, as linhas implícitas se ajustam ao conteúdo, o que pode criar layouts desiguais.

Verificação rápida

O que grid-auto-flow: row dense faz?

Recapitulação

A grade implícita amplia a grade explícita com trilhas criadas automaticamente. grid-auto-rows/columns controla o tamanho delas; minmax() torna-as flexíveis. grid-auto-flow direciona a ordem de posicionamento. O preenchimento dense preenche as lacunas de forma agressiva — é útil para layouts semelhantes a alvenaria, mas pode quebrar a ordem visual.

Perguntas Frequentes

A aula “Grade Implícita e Grid-Auto-Flow” é grátis?

Sim — o texto completo de “Grade Implícita e Grid-Auto-Flow” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Grade Implícita e Grid-Auto-Flow”?

Compreenda como o CSS Grid lida com itens além das trilhas explícitas usando linhas e colunas implícitas. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Grade Implícita e Grid-Auto-Flow”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Linhas Nomeadas e Áreas de Grade Nomeadas
  2. Auto-fit e Auto-fill com minmax
  3. Grade Implícita e Grid-Auto-Flow
  4. Subgrid para Conteúdo Aninhado Alinhado
← Voltar para CSS Academy