layoutbeginner

Responsive Auto-fit Grid

Grid that automatically adjusts columns based on available space.

Preview

Card 1

Card 2

Card 3

Card 4

Tailwind Classes

grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6

CSS Code

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

HTML Example

<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
  <div class="bg-white p-4 rounded-lg shadow">Card 1</div>
  <div class="bg-white p-4 rounded-lg shadow">Card 2</div>
  <div class="bg-white p-4 rounded-lg shadow">Card 3</div>
  <div class="bg-white p-4 rounded-lg shadow">Card 4</div>
</div>

Use Cases

Product gridsGallery layoutsCard gridsFeature lists

Browser Support

All modern browsers

#grid#responsive#layout#auto-fit