josiahsiegel/tailwindcss-advanced-layouts

O que tailwindcss-advanced-layouts faz?

Técnicas avançadas de layout com Tailwind CSS, incluindo padrões de CSS Grid e Flexbox. Ative PROATIVAMENTE para: (1) construir layouts complexos com CSS Grid, (2) grid-template-areas via valores arbitrários do Tailwind v4, (3) grid responsivo (grid-cols-*, auto-fit, minmax), (4) padrões Flexbox (flex-1, flex-grow, gap), (5) cabeçalhos e rodapés fixos (sticky), (6) layout “holy grail”, (7) layouts estilo masonry, (8) consultas de contêiner (@container) com Tailwind, (9) uso de subgrid, (10) utilidades de aspect-ratio, (11) layouts multi-coluna estilo revista. Fornece: receitas de grid, padrões de container query, templates de holy grail, alternativas a masonry e exemplos de aspect-ratio.

Receitas de Grid

• Grid básico: Use grid grid-cols-3 gap-4 para criar um grid de três colunas com espaçamento de 1rem.
• Grid responsivo: Combine grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 para adaptar o número de colunas conforme a viewport.
• Grid-template-areas (Tailwind v4): Utilize valores arbitrários: grid grid-cols-[1fr_2fr_1fr] grid-rows-[auto_1fr_auto] e defina áreas manualmente com [grid-template-areas:'header header header'_'sidebar main aside'_'footer footer footer'].

Padrões de Container Query

Habilite consultas de contêiner com @container:

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3">
    <!-- Itens responsivos ao contêiner -->
  </div>
</div>

Layout “Holy Grail”

<div class="grid grid-rows-[auto_1fr_auto] min-h-screen">
  <header class="bg-gray-200 p-4">Cabeçalho</header>
  <div class="grid grid-cols-[200px_1fr_200px]">
    <nav class="bg-gray-100 p-4">Navegação</nav>
    <main class="p-4">Conteúdo principal</main>
    <aside class="bg-gray-100 p-4">Barra lateral</aside>
  </div>
  <footer class="bg-gray-200 p-4">Rodapé</footer>
</div>

Alternativas a Masonry

Use CSS columns para um efeito masonry sem depender de JavaScript:

<div class="columns-1 sm:columns-2 lg:columns-3 gap-4">
  <div class="break-inside-avoid mb-4">
    <img src="..." class="w-full h-auto" />
    <!-- Descrição -->
  </div>
  <!-- Repita para cada item -->
</div>

Exemplos de Aspect-Ratio

<div class="aspect-video bg-gray-300">
  <!-- Vídeo ou imagem 16:9 -->
</div>
<div class="aspect-square bg-gray-300">
  <!-- Quadrado -->
</div>

Layout Multi-Coluna Estilo Revista

<div class="columns-3 gap-8">
  <p class="mb-4">Primeiro parágrafo...</p>
  <p class="mb-4">Segundo parágrafo...</p>
  <!-- Conteúdo fluindo em colunas -->
</div>

Subgrid

Use grid grid-cols-3 em um contêiner e, dentro dele, um elemento com grid grid-cols-subgrid para alinhar automaticamente os filhos ao grid pai.

Sticky Header e Footer

<header class="sticky top-0 bg-white z-10">Cabeçalho fixo</header>
<main class="min-h-screen">Conteúdo scrollável</main>
<footer class="sticky bottom-0 bg-white">Rodapé fixo</footer>

---

Documentação baseada na skill josiahsiegel/tailwindcss-advanced-layouts.