CODEWITHSUNDEEP
csstailwind-css
Sam
Sam

Reputation: 1230

Tailwindcss Grid of Items with Dynamic Height

I want to create a grid of photos as such:

grid of photos

where each cell may have different row height in order to maintain the picture's aspect ratio given a set width.

When I try to create a dummy prototype using flex, even if cells consume only as much height as they need (due to h-min), the cell under them is not placed directly under but there's a gap if one of the other items on the row is taller (see example below).

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

<div class="flex w-full flex-wrap">
  <div class="w-1/3 bg-red-100 h-min">item 1</div>
  <div class="w-1/3 bg-blue-100 h-min">item 2<br>extra tall</div>
  <div class="w-1/3 bg-yellow-100 h-min">item 3</div>
  <div class="w-1/3 bg-purple-100 h-min">item 4</div>
  <div class="w-1/3 bg-green-100 h-min">item 5</div>
  <div class="w-1/3 bg-fuchsia-100 h-min">item 6</div>
</div>

I was thinking about using three nested flexboxes within a parent flexbox, and while I don't see why that wouldn't work, I need to incorporate responsive design and change the number of columns to 1 on smaller screens, and using three separate flexboxes, one for each column would cause wrong display order.

Is there any way I can achieve what I need?

Upvotes: 2

Views: 4487

Answers (1)

Larissa
Larissa

Reputation: 138

You could use the columns-{count} utility to control the column count and have dynamic column width, or the columns-{width} utility to control the column width and have dynamic column count. This won't work if you're going to have photos span horizontally across columns, though.

The gap between columns can be set with the gap-{size} utility, and the vertical space gap within a column can be set with the space-y-{amount} utility.

<!-- column-{width} difference seen at 1024px screeen width -->
<!-- <div class="columns-3xs md:columns-xs lg:columns-md gap-4 space-y-4 p-8"> -->
<!-- column-{count} -->
<div class="columns-1 md:columns-2 lg:columns-3 gap-4 space-y-4 p-8">
  <div class="h-min w-full bg-red-400">
    <img class="object-cover" src="https://source.unsplash.com/random/700x400/?subway" alt="subway" />
  </div>
  <div class="h-min w-full bg-blue-400">
    <img class="object-cover" src="https://source.unsplash.com/random/?city" alt="city" />
  </div>
  <div class="h-min w-full bg-orange-400">
    <img class="object-cover" src="https://source.unsplash.com/random/700x300/?fruit" alt="fruit" />
  </div>
  <div class="h-min w-full bg-green-400">
    <img class="object-cover" src="https://source.unsplash.com/random/700x500/?forest" alt="forest" />
  </div>
  <div class="h-min w-full bg-yellow-400">
    <img class="object-cover" src="https://source.unsplash.com/random/?sunset" alt="sunset" />
  </div>
  <div class="h-min w-full bg-lime-400">
    <img class="object-cover" src="https://source.unsplash.com/random/?desert" alt="desert" />
  </div>
  <div class="h-min w-full bg-fuchsia-400">
    <img class="object-cover" src="https://source.unsplash.com/random/700x250/?ocean" alt="ocean" />
  </div>
  <div class="h-min w-full bg-teal-400">
    <img class="object-cover" src="https://source.unsplash.com/random/700x300/?clouds" alt="clouds" />
  </div>
</div>

Here is a Tailwind Play demo.

Upvotes: 3

Related Questions