Tailwind Columns


Tailwind Three Columns Responsive example

Here is the example of three column responsive website example using tailwind css. Use flex in the wrapper div and use tailwind class for width percent to achieve the columns in tailwind css.

First Column
second Column
Third Column
<div class="md:flex">
    <div class="w-full md:w-1/3 bg-green-200">First Column</div>
    <div class="w-full md:w-1/3 bg-green-400">second Column</div>
    <div class="w-full md:w-1/3 bg-green-200">Third Column</div>
</div>

Three columns responsive with margin separated.

Use negative margin with flex in wrapper ```div``` tag and then apply margin to each components.

First Column
Second Column
First Column
<div class="md:flex md:-mx-4">
    <div class="w-full px-4 md:mx-4 md:w-1/3 bg-green-200">First Column</div>
    <div class="w-full px-4 md:mx-4 md:w-1/3 bg-green-400">Second Column</div>
    <div class="w-full px-4 md:mx-4 md:w-1/3 bg-green-200">First Column</div>
</div>

Twelve columns example

Example of twelve columns with flex only.

First Column
2nd Column
3rd Column
4th Column
5th Column
6th Column
7th Column
8th Column
9th Column
10 Column
11th Column
12th Column
<div class="flex">
    <div class="w-1/12 bg-green-100">First Column</div>
    <div class="w-1/12 bg-green-200">2nd Column</div>
    <div class="w-1/12 bg-green-300">3rd Column</div>
    <div class="w-1/12 bg-green-400">4th Column</div>
    <div class="w-1/12 bg-green-500">5th Column</div>
    <div class="w-1/12 bg-green-600">6th Column</div>
    <div class="w-1/12 bg-green-700">7th Column</div>
    <div class="w-1/12 bg-green-800">8th Column</div>
    <div class="w-1/12 bg-green-900">9th Column</div>
    <div class="w-1/12 bg-green-800">10 Column</div>
    <div class="w-1/12 bg-green-700">11th Column</div>
    <div class="w-1/12 bg-green-600">12th Column</div>
</div>

Role of Flex wrap

Flex sets all the content in one row even we set widths to 25% of each.

First Column
2nd Column
3rd Column
4th Column
First Column
2nd Column
3rd Column
4th Column
<div class="flex">
    <div class="w-1/4 h-20 flex items-center bg-green-100">First Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-200">2nd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-300">3rd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-400">4th Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-100">First Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-200">2nd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-300">3rd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-400">4th Column</div>
</div>

Four Columns example with flex wrap.

In the above example we have set width to 25% however it all the columns are set in one row. To go columns in next row use flex wrap.

First Column
2nd Column
3rd Column
4th Column
First Column
2nd Column
3rd Column
4th Column
<div class="flex flex-wrap">
    <div class="w-1/4 h-20 flex items-center bg-green-100">First Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-200">2nd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-300">3rd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-400">4th Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-400">First Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-300">2nd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-200">3rd Column</div>
    <div class="w-1/4 h-20 flex items-center bg-green-100">4th Column</div>
</div>

Tailwind Container

Use container with mx-auto to center and with padding 20.

This is my content inside container
<div class="container mx-autp px-4 md:px-20">
    <div class="bg-green-600 text-gray-200 px-4 py-6">
    This is my content inside container
    </div>
</div>

Equal height three columns responsive inside a container.

Examples shows a full background and all the content inside a container, similar to bootstrap container. The container has three coulms of equal height which will becomes full height for mobile devices.

location_on
899 Tillman Centers Apt. 797,North Charley
textsms
430.208.4025
alternate_email
location_on
7388 Mertie Ridge Suite 429,South Alene
textsms
+1-625-328-6621
alternate_email
location_on
33152 Luna Land,Port Cameronborough
textsms
(239) 884-5976 x78144
alternate_email