Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Columns

Quiz

Tailwind CSS Column utility controls the number of columns within an element. Adding Column utility to an element eliminates the need to write custom CSS code for column generation.

The Tailwind CSS column class automatically adjusts the width to accommodate the specified count. Even, we can adapt it by selecting the ideal width.

Syntax

<element class="columns-*"></element>

Tailwind CSS Columns Classes

Below mentioned classes can be used to control the columns layout.

Class	CSS Properties
columns-*	columns: *;
columns-auto	columns: auto;
columns-{3xs-xs}	columns: {16-20rem};
columns-sm	columns: 24rem;;
columns-md	columns: 28rem;
columns-lg	columns: 32rem;
columns-{xl-7xl}	columns: {36rem-80rem};

Functionality of Tailwind CSS Columns Classes

columns-*: Tailwind CSS Columns-{*} Class representing Columns Count within an element. It ranges from 1 to 12.
columns-{3xs-xs}: Tailwind CSS Columns-{3xs-xs} Class representing Extra small Columns ranges 3xs to xs, having width ranges from 16 to 18rem.
Columns-{xl-7xl}: Tailwind CSS Columns-{xl-7xl} Class representing Extra large Columns ranges xl to 7xl having widths ranging from 36 to 80 rem.

Tailwind CSS Columns Examples

Below example will illustrate the Tailwind CSS Columns classes.

Adding Based on Column Count

The below example illustrate the use of Tailwind CSS Columns-* Class having columns count three, which will create three columns within an element.

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <p class="text-3xl font-bold">
        Tailwind CSS Columns Class
    </p>
    <p>Tailwind CSS Columns-* Class</p>
    <div class="columns-3 gap-6 space-y-4">
        <img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />

        <img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
    </div>
</body>
</html>

Width Based Tailwind CSS Columns Class

The below example illustrate the use of Tailwind CSS Columns-3xs Class, which will align elements based on screen size.

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <p class="text-3xl font-bold">
        Tailwind CSS Columns Class
    </p>
    <p>Tailwind CSS Columns-* Class</p>
    <div class="columns-3xs space-y-4">
        <img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
                  
        <img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
             
        <img class="w-full aspect-auto" src=
"https://www.tutorialspoint.com/html/images/html.jpg" />
             
        <img class="w-full aspect-video" src=
"https://www.tutorialspoint.com/html/images/html-mini-logo.jpg" />
             
    </div>
</body>

</html>

Print Page