Conceitos Básicos de Layout

Neste primeiro módulo, vamos desvendar os conceitos fundamentais do CSS Grid, a base para criar layouts impressionantes. O CSS Grid oferece uma abordagem flexível e poderosa para organizar elementos na página.

Estrutura de Linhas e Colunas

O layout no CSS Grid é construído em uma grade composta por linhas e colunas. Imagine isso como uma tabela invisível, onde você define quantas linhas e colunas deseja. Veja um exemplo simples:

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px; 
  /* Duas linhas de altura 100px e 200px */
  grid-template-columns: 1fr 2fr; 
  /* Duas colunas, a primeira com 1 parte e a segunda com 2 partes */
}

Posicionamento de Elementos

Para colocar elementos na grade, usamos as propriedades grid-row e grid-column. Elas determinam em qual linha e coluna o elemento deve estar. Vamos exemplificar:

.item1 {
  grid-row: 1; /* Este elemento ocupará a primeira linha */
  grid-column: 1 / span 2; /* Espana por duas colunas a partir da primeira */
}

Adaptabilidade com Grid Auto

O Grid oferece uma flexibilidade incrível com a propriedade grid-auto-flow. Ela decide como os elementos são colocados automaticamente na grade. Por exemplo:

.grid-container {
  display: grid;
  grid-auto-flow: dense; 
  /* Os elementos serão preenchidos automaticamente, ocupando o espaço disponível */
}

Compartilhar

Compartilhar

Siga-me