How to prevent css column wrapping using Tailwindcss

Question

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 related Tailwind css of

ol is

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

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

Answer 1

To prevent CSS columns from wrapping in Tailwind CSS, you can use the break-inside property. Setting break-inside to avoid-column on

elements will prevent them from splitting across columns, you can try the following 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>

break-inside-avoid-column utility class provided by Tailwind CSS and sets the break-inside property to avoid-column. This ensures that each

element remains intact within its column without being split.