Tailwind Columns Cutting Off + Setting Height

June 21, 2023

I’m trying to create a masonry grid exactly how it’s showcased on the Tailwind documentation: https://tailwindcss.com/docs/columns#basic-usage

So, I have the following code trying to achieve that:

const Tile = (props) => {
  const { data } = props;

  return (
    <div className='rounded border p-4 mb-4'>
      {data}
    </div>
  );
};

const Masonry = (props) => {
  const { data } = props;

  <div className='columns-3'>
    {data.map((item) => (
      <Tile
        key={item.name}
        data={item}
      />
    ))}
  </div>
};

However, for some reason, the content is being cut off like so, and I haven’t been able to figure out why. I’ve checked the dev tools, tried setting custom heights to the entire container, to the specific container where columns-3 is defined, and nothing is working.

What am I doing wrong?

>Solution :

Apply break-inside: avoid-column or break-inside: avoid with break-inside-avoid-column or break-inside-avoid respectively to the <Tile> root <div> to avoid the behavior you describe:

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

<div class="columns-3">
  <div class="rounded border p-4 mb-4 break-inside-avoid-column">
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
  </div>
  <div class="rounded border p-4 mb-4 break-inside-avoid-column">
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
  </div>
  <div class="rounded border p-4 mb-4 break-inside-avoid-column">
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
  </div>
  <div class="rounded border p-4 mb-4 break-inside-avoid-column">
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
  </div>
  <div class="rounded border p-4 mb-4 break-inside-avoid-column">
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
  </div>
  <div class="rounded border p-4 mb-4 break-inside-avoid-column">
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
  </div>
  <div class="rounded border p-4 mb-4 break-inside-avoid-column">
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
    Foo bar<br/>
  </div>
</div>