Tailwind CSS: How to Create Columns with the Same Height

Last updated on May 7, 2022 Pennywise Loading... Post a comment

In Tailwind CSS, we can use flex or grid utility class to create a layout with multiple columns sitting side by side (on the same rows) and all of the columns are equal in height.

Example

Screenshot:

This code produces the result above (the parent element has the flex utility class):

<div class="flex m-20">
        <div class="w-1/4 bg-blue-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Some text
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="w-1/4 bg-amber-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh et dolor vestibulum commodo eu in
                nulla. Etiam molestie diam at mollis mollis
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="w-1/4 bg-green-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Sed eget tortor ullamcorper, mollis nibh ut, pretium augue.
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="w-1/4 bg-cyan-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Short text
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>

</div>

You can achieve the same thing like so (the parent element makes use of the grid utility class):

 <div class="grid grid-cols-4 gap-4 m-20">
        <div class="bg-blue-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Some text
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="bg-amber-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh et dolor vestibulum commodo eu in
                nulla. Etiam molestie diam at mollis mollis
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="bg-green-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Sed eget tortor ullamcorper, mollis nibh ut, pretium augue.
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>
        <div class="bg-cyan-500 p-5 flex flex-col">
            <div class="text-white flex-1">
                Short text
            </div>
            <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
        </div>

</div>

Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like