Tailwind Responsive Grid

Grid Responsivo com Tailwind

Um padrão de grid responsivo que funciona perfeitamente em todos os dispositivos.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  {items.map((item) => (
    <div key={item.id} className="p-4 border rounded-lg">
      {item.content}
    </div>
  ))}
</div>

Variações

Grid com Auto-fit

<div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <!-- Conteúdo -->
</div>

Grid com Aspect Ratio

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div className="aspect-square bg-gray-200 rounded-lg">
    <!-- Conteúdo quadrado -->
  </div>
</div>

Dicas

• Use gap-x e gap-y para controlar espaçamento específico
• Combine com container mx-auto para centralizar
• Use place-items-center para centralizar conteúdo