CSS Grid com Claude Code

Implementando Layouts Complexos de Forma Concisa com CSS Grid

O CSS Grid é o núcleo do design de layout moderno. Com o Claude Code, você pode gerar código de layouts grid complexos com rapidez e precisão.

Layout Grid Básico

> Crie um layout de dashboard com CSS Grid.
> Com 4 áreas: header, sidebar, conteúdo principal e footer.

/* Layout de Dashboard */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
}

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

/* Responsivo: 1 coluna no mobile */
@media (width < 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr 40px;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }
}

Layout Automático com auto-fill / auto-fit

/* Grid de cards: ajusta automaticamente o número de colunas */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* auto-fit: estica quando há poucos itens */
.stretch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Ponto de comparação:
   auto-fill -> mantém tracks vazios (largura fixa dos itens)
   auto-fit  -> colapsa tracks vazios (itens se expandem) */

Layout de Magazine

/* Grid irregular estilo revista */
.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}

.magazine .featured {
  grid-column: span 2;
  grid-row: span 2;
}

.magazine .wide {
  grid-column: span 2;
}

.magazine .tall {
  grid-row: span 2;
}

Utilizando Subgrid

/* Alinhando elementos dentro dos cards com Subgrid */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* 3 linhas: título, corpo, footer */
}

.card__title {
  align-self: start;
  font-size: 1.25rem;
  font-weight: bold;
}

.card__body {
  align-self: start;
}

.card__footer {
  align-self: end;
  border-top: 1px solid #eee;
  padding-top: 0.5rem;
}

Layout Avançado com Named Lines

.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(65ch, 100%)
    [content-end] minmax(1rem, 1fr)
    [full-end];
}

.page > * {
  grid-column: content;
}

.page .full-bleed {
  grid-column: full;
}

.page .wide {
  grid-column: full;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

Animação com CSS Grid

/* Transição animada do grid */
.animated-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.3s ease;
}

.animated-grid.collapsed {
  grid-template-columns: 0fr 1fr;
}

.animated-grid .sidebar {
  overflow: hidden;
  min-width: 0;
}

Classes Utilitárias Práticas

/* Utilitários de grid */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-full { grid-column: 1 / -1; }

Resumo

O CSS Grid, usado em conjunto com Flexbox, pode lidar com qualquer layout. Com o Claude Code, você pode implementar corretamente funcionalidades avançadas como subgrid e named lines. Não se esqueça de combinar com media queries para responsividade. Para especificações detalhadas do CSS Grid, consulte CSS Grid Layout Module Level 2.