Tailwind Responsive Grid

Responsive Grid with Tailwind

A responsive grid pattern that works perfectly on all devices.

html

<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>

Variations

Auto-fit Grid

html

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

Grid with Aspect Ratio

html

<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">
    <!-- Square content -->
  </div>
</div>

Tips

Use gap-x and gap-y to control specific spacing
Combine with container mx-auto to center
Use place-items-center to center content