Tailwind CSS Columns
One can easily control the number of columns to be kept within the element by using utility class columns.
Basic usage
Adding based on column count
'columns-{count}'
utility helps you define
the number of columns you wish to keep within an
element. Column width will be automatically adjusted to
adjust the particular count of the column.
<div class="columns-1 md:columns-2 xl:columns-3 gap-7 ">
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="Gallery image">
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031232.jpg" alt="Gallery image">
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031357.jpg" alt="Gallery image">
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031375.jpg" alt="Gallery image">
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031396.jpg" alt="Gallery image">
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031414.png" alt="Gallery image">
</div>
</div>
Adding based on column width and setting the column gap
To set the ideal column width for content within an
element, use 'columns-{width}'
, with the
number of columns (the count) automatically adjusting to
the ideal width. 'gap-x'
can be used to
adjust spacing between the columns.
<div class="columns-1 md:columns-2 xl:columns-3 gap-7 ">
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="Gallery image">
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031232.jpg" alt="Gallery image">
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031357.jpg" alt="Gallery image">
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031375.jpg" alt="Gallery image">
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031396.jpg" alt="Gallery image">
</div>
<div class=" break-inside-avoid mb-8">
<img class="h-auto max-w-full rounded-lg" src="https://pagedone.io/asset/uploads/1688031414.png" alt="Gallery image">
</div>
</div>