Layout

Tailwind CSS Columns

One can easily control the number of columns to be kept within the element by using utility class columns.

image
Class
Properties
columns-1 columns: 1;
columns-2 columns: 2;
columns-3 columns: 3;
columns-4 columns: 4;
columns-5 columns: 5;
columns-6 columns: 6;
columns-7 columns: 7;
columns-8 columns: 8;
columns-9 columns: 9;
columns-10 columns: 10;
columns-11 columns: 11;
columns-12 columns: 12;
columns-auto columns: auto
columns-3xs columns: 16rem; /* 256px */
columns-2xs columns: 18rem; /* 288px */
columns-xs columns: 20rem; /* 320px */
columns-sm columns: 24rem; /* 384px */
columns-md columns: 28rem; /* 448px */
columns-lg columns: 32rem; /* 512px */
columns-xl columns: 36rem; /* 576px */
columns-2xl columns: 42rem; /* 672px */
columns-3xl columns: 48rem; /* 768px */
columns-4xl columns: 56rem; /* 896px */
columns-5xl columns: 64rem; /* 1024px */
columns-6xl columns: 72rem; /* 1152px */
columns-7xl columns: 80rem; /* 1280px */

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.

Gallery image
Gallery image
Gallery image
Gallery image
Gallery image
Gallery image 
<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.

Gallery image
Gallery image
Gallery image
Gallery image
Gallery image
Gallery image 
<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>