Is it possible to use Tailwind to create a responsive grid (dynamic number of columns that wraps to new row when appropriate)?

Question

https://play.tailwindcss.com/gUoOBmaNxj was my attempt:

<div class="w-96 border-2 border-red-500">
  <div class="grid auto-cols-max grid-flow-col gap-2 border-2 border-black">
    <div class="w-20 bg-blue-500 p-4">1</div>
    <div class="w-20 bg-green-500 p-4">2 this one is taller</div>
    <div class="w-20 bg-red-500 p-4">3</div>
    <div class="w-20 bg-yellow-500 p-4">4</div>
    <div class="w-20 bg-purple-500 p-4">5</div>
    <div class="w-20 bg-pink-500 p-4">6</div>
    <div class="w-20 bg-indigo-500 p-4">7</div>
    <div class="w-20 bg-teal-500 p-4">8</div>
    <div class="w-20 bg-cyan-500 p-4">9</div>
    <div class="w-20 bg-gray-500 p-4">10</div>
  </div>
</div>

But you can see that it just creates 1 row and doesn't wrap.

I don't understand the Tailwind grid docs (e.g. https://tailwindcss.com/docs/grid-auto-columns).

The red-bordered container represents the screen width.

I want people to be able to resize their screens and have the grid adjust.

But I don't want to need to use breakpoints like sm: and md: and specify a number of columns for each.

Strow

Answer 1

Consider applying grid-template-columns: repeat(auto-fill, <size>) or grid-template-columns: repeat(auto-fit, <size>) via a grid-cols-* class. The <size> will be up to you, since you have not specified any specification for the column sizes. Here's an example with 5rem:

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="w-96 border-2 border-red-500">
  <div class="grid grid-cols-[repeat(auto-fill,5rem)] gap-2 border-2 border-black">
    <div class="w-20 bg-blue-500 p-4">1</div>
    <div class="w-20 bg-green-500 p-4">2 this one is taller</div>
    <div class="w-20 bg-red-500 p-4">3</div>
    <div class="w-20 bg-yellow-500 p-4">4</div>
    <div class="w-20 bg-purple-500 p-4">5</div>
    <div class="w-20 bg-pink-500 p-4">6</div>
    <div class="w-20 bg-indigo-500 p-4">7</div>
    <div class="w-20 bg-teal-500 p-4">8</div>
    <div class="w-20 bg-cyan-500 p-4">9</div>
    <div class="w-20 bg-gray-500 p-4">10</div>
  </div>
</div>

<div class="border-2 border-red-500">
  <div class="grid grid-cols-[repeat(auto-fill,5rem)] gap-2 border-2 border-black">
    <div class="w-20 bg-blue-500 p-4">1</div>
    <div class="w-20 bg-green-500 p-4">2 this one is taller</div>
    <div class="w-20 bg-red-500 p-4">3</div>
    <div class="w-20 bg-yellow-500 p-4">4</div>
    <div class="w-20 bg-purple-500 p-4">5</div>
    <div class="w-20 bg-pink-500 p-4">6</div>
    <div class="w-20 bg-indigo-500 p-4">7</div>
    <div class="w-20 bg-teal-500 p-4">8</div>
    <div class="w-20 bg-cyan-500 p-4">9</div>
    <div class="w-20 bg-gray-500 p-4">10</div>
  </div>
</div>

Durbin

I think that's probably exactly what I wanted! Right, I'd specified the cell widths via w-20, which is 5rem according to tailwindcss.com/docs/width, so your approach is probably what I was looking for. I never would have figured this out from the docs. Thanks! – Strow

Epic answer, works as advertised, thank you! More importantly, I'm surprised there isn't a more obvious/direct way to do this in Tailwind. – Amaro

I know I am late. But I want to add a little more to the answer , grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-10 . This will make every grid at least 300px and when small screen each grid will take whole screen width. – Uncommitted