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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.