Componha a página com Flexbox e Grid sem margens mágicas

Flexbox e Grid não são concorrentes. Flexbox organiza uma relação principal, como links numa barra ou conteúdo num cartão. Grid descreve trilhos em duas dimensões, como a grade de benefícios. Nesta aula, cada ferramenta recebe um trabalho que combina com seu modelo.

Comece pelo cabeçalho. A marca, os links e o botão formam uma linha. No mobile, podem formar uma coluna, mas continuam numa sequência.

<header class="flex flex-col gap-4 md:flex-row md:items-center">
  <strong>Clínica em Dia</strong>
  <nav class="flex gap-4">...</nav>
  <a class="md:ms-auto" href="#preco">Começar</a>
</header>

md:ms-auto absorve o espaço antes da ação quando a direção vira linha. No mobile, a classe não está ativa e a ordem natural permanece. Você não precisa de margin-left: 247px, valor que quebraria com tradução ou zoom.

Os benefícios precisam alinhar colunas e crescer juntos. O container Grid manda na malha:

<section class="grid grid-cols-1 gap-4 md:grid-cols-3">
  <article>Agenda</article>
  <article>Pacientes</article>
  <article>Relatórios</article>
</section>

Cada trilho usa minmax(0, 1fr), o que ajuda conteúdo a encolher. Ainda assim, uma palavra sem quebra pode estourar. Teste nomes reais, URLs e zoom. Layout responsivo não é apenas mudar quantidade de colunas.

Dentro de cada cartão, Flexbox volta. A ação deve ficar no rodapé mesmo quando a descrição é curta:

<article class="flex min-h-64 flex-col gap-4 p-6">
  <h2>Agenda</h2>
  <p>Organize horários e lembretes da equipe.</p>
  <a class="mt-auto" href="#agenda">Conhecer</a>
</article>

Margin auto só empurra quando existe espaço livre. Sem altura mínima, o cartão encolhe ao conteúdo e não sobra nada. Essa observação conecta sintoma e mecanismo; não adicione mais margin por tentativa.

Uma sidebar com conteúdo flexível traz outro erro clássico. flex-1 permite crescer, mas o tamanho mínimo do conteúdo pode impedir shrink. min-w-0 declara que o item pode encolher abaixo desse mínimo automático.

<div class="flex gap-6">
  <main class="min-w-0 flex-1">...</main>
  <aside class="w-72 flex-none">...</aside>
</div>

No laboratório, a grade de três colunas cabe no canvas largo. Antes de ativá-la, reduza a janela e observe o momento em que os cartões ficam apertados. O player não compila classes novas; ele oferece duas regras previamente definidas para comparação. No projeto real, Tailwind geraria cada uma a partir do HTML.

Evite grid-flow-dense para conteúdo com ordem de leitura. Ele pode preencher buracos posicionando um item posterior antes visualmente, enquanto teclado e leitor de tela seguem o DOM. Uma grade de cards de produto costuma ter sequência significativa.

O critério de conclusão é resistência: duplique o texto do segundo cartão, aumente a fonte do navegador e confirme que a ação continua acessível. Explique por que o cabeçalho é Flex, a seção é Grid e o interior volta a ser Flex. Quando você consegue justificar cada container, deixa de escolher layout pelo nome da classe e passa a escolher pelo problema.

Salve duas larguras de teste e escreva ao lado qual elemento controla cada dimensão. Se a resposta aponta para filhos individuais em toda a grade, revise o container: uma malha previsível concentra os trilhos no pai e deixa os itens declararem apenas a ocupação excepcional.