How to prevent css columns from wrapping with Tailwindcss

Using tailwindcss I have the following html

<ol class="relative columns-1 sm:columns-3">
   <li>
       <img src="https://placehold.co/400x300">id=voluptas minus a qui tempore
   </li>
   <li>...</li>
   ...
</ol>

The relevant Tailwind css for the ol is

.sm:columns-3 {
   columns: 3;
}

As you can see (red arrow) one cell is wrapped. The other part of that cell is at the bottom of the middle column. This is something I don't want, no wrapping. Is there some way this can be prevented or should I make sure that all cells have the same height?

To prevent CSS columns from wrapping in Tailwind CSS, you can use the break-inside property. Setting break-inside to avoid-column on the <li> elements will prevent them from being split across columns, you can try this logic:

<ol class="relative columns-1 sm:columns-3">
  <li class="break-inside-avoid-column">
    <img src="https://placehold.co/400x300">id=voluptas minus a qui tempore
  </li>
  <li class="break-inside-avoid-column">...</li>
  ...
</ol>

The break-inside-avoid-column utility class is provided by Tailwind CSS and sets the break-inside property to avoid-column. This ensures that each <li> element remains intact within its column without being split.