CSS Grid Moderno: Técnicas Avançadas de Layout 🎨

CSS Grid revolucionou a forma como construímos layouts na web. Vamos explorar técnicas modernas que vão além do básico e permitem criar interfaces responsivas sem depender de media queries.

🎯 Por Que CSS Grid?

• Layouts bidimensionais: Controle de linhas E colunas
• Menos código: Substitui muitos hacks de float e flexbox
• Responsividade intrínseca: Auto-adaptação sem media queries
• Manutenção simples: Código mais legível e organizado

💡 Auto-Fit vs Auto-Fill

Auto-Fill

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

Resultado: Preenche a linha com colunas, mesmo que vazias.

Auto-Fit

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Resultado: Expande as colunas para preencher o espaço disponível.

🔥 Grid Responsivo Sem Media Queries

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
}

Esta técnica cria um grid que:

• Se adapta automaticamente ao tamanho da tela
• Mantém largura mínima de 300px
• Ocupa 100% em telas pequenas
• Distribui espaço igualmente em telas grandes

📐 Subgrid: O Poder da Herança

.main-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid; /* Herda linhas do pai */
  grid-row: span 3;
}

🎨 Grid Areas Nomeadas

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

⚡ Técnicas Avançadas

1. Dense Packing

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-flow: dense; /* Preenche espaços vazios */
  gap: 1rem;
}

.item-large {
  grid-column: span 2;
  grid-row: span 2;
}

2. Overlapping Elements

.overlay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.background {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.content {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 1;
}

3. Aspect Ratio Containers

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.card {
  aspect-ratio: 16 / 9; /* Mantém proporção */
  display: grid;
  place-items: center;
}

🛠️ Padrões Práticos

Card Grid Responsivo

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30%, 350px), 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 5vw, 3rem);
}

Holy Grail Layout

.holy-grail {
  display: grid;
  grid-template: 
    "header" auto
    "nav" auto
    "main" 1fr
    "aside" auto
    "footer" auto
    / 1fr;
}

@media (min-width: 768px) {
  .holy-grail {
    grid-template:
      "header header header" auto
      "nav main aside" 1fr
      "footer footer footer" auto
      / 200px 1fr 200px;
  }
}

Dashboard Grid

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 200px;
  gap: 1.5rem;
}

.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

🎓 Funções Úteis

1. minmax()

grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);

2. clamp()

grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 50vw, 400px), 1fr));

3. fit-content()

grid-template-columns: fit-content(200px) 1fr fit-content(300px);

💻 Exemplo Completo: Card Grid

.product-grid {
  --min-column-width: 280px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-column-width), 100%), 1fr)
  );
  gap: var(--gap);
  padding: var(--gap);
}

.product-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-image {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}

.product-info {
  display: grid;
  gap: 0.5rem;
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}

📊 Performance e Suporte

• Suporte: 96%+ dos navegadores
• Performance: Renderização nativa, muito rápida
• Debug: Use DevTools para visualizar grid

✅ Checklist

• Use auto-fit para responsividade automática
• Combine com minmax() para flexibilidade
• Aproveite gap em vez de margins
• Use grid-template-areas para layouts complexos
• Experimente subgrid para alinhamento perfeito
• Evite media queries quando possível

CSS Grid é poderoso. Com essas técnicas, você pode criar layouts complexos com código simples e manutenível! 🎨