Tailwind CSS - Flexbox & Grid


Tailwind CSS Flexbox and Grid is a layout module that efficiently aligns items within a flex or grid container. It consists of a list of utility classes that enable the effective construction of flex and grid containers such as flex-basis, flex grow, flex shrink, grid-template-columns,grid-auto-rows, gap, and many more..

Tailwind CSS Flexbox & Grid Reference

Below mentioned topics can be used to create an effective Layout on elements.

Topic Description Example
Tailwind CSS - Flex Basis Flex Basis is used to define the initial size of flex items.
Tailwind CSS - Flex Direction Flex Direction is used to set the direction of flex items within a flex container.
Tailwind CSS - Flex Wrap Flex Wrap utility controls whether flex items wrap to a new line or not.
Tailwind CSS - Flex Flex class specifies how flex items both grow and shrink within a flex container.
Tailwind CSS - Flex Grow Flex Grow class specifies how flex items grow within a flex container.
Tailwind CSS - Flex Shrink Flex Shrink class specifies how flex items shrink within a flex container.
Tailwind CSS - Order Order Class specifies the order of flex and grid items within its container.
Tailwind CSS - Grid Template Columns Grid Template Columns class specifies the number and size of columns in a grid layout.
Tailwind CSS - Grid Column Start/End Grid Column Start/End class specifies the arrangement and size of columns across grid columns
Tailwind CSS - Grid Template Row Grid Template Row specifies the number and size of rows in a grid layout.
Tailwind CSS - Grid Row Start/End Grid Row Start/End class specifies the arrangement and size of rows across grid rows
Tailwind CSS - Grid Auto Flow Grid Auto Flow class specifies the automatic alignment of an element in a grid layout.
Tailwind CSS - Grid Auto Columns grid auto columns class specifies the size of grid columns that are created implicitly.
Tailwind CSS - Grid Auto Rows Grid Auto Rows specifies the size of grid rows that are created implicitly.
Tailwind CSS - Gap Gap class is used to add space between grid and flex items.
Tailwind CSS - Justify Content Justify Content is used to align flex and grid items along the main axis or horizontal plane.
Tailwind CSS - Justify Items Justify Items is used to align grid items along their inline axis or horizontal alignment of grid items within their grid cells.
Tailwind CSS - Justify Self Justify self class is used to align individual grid items along its inline axis.
Tailwind CSS - Align Content Align Content is used to positioned rows in a multi-row flex container and grid container along the cross axis.
Tailwind CSS - Align Items Align Items is used to position flex and grid items along the containers cross-axis.
Tailwind CSS - Align Self Align Self is used to align individual grid and flex items along its container's cross axis.
Tailwind CSS - Place Content Place content class is used to justify and align content simultaneously
Tailwind CSS - Place Items Place Items class is used to justify and align items simultaneously
Tailwind CSS - Place Self Place self class is used to justify and align individual items simultaneously

Example of Tailwind CSS Flexbox

In the following example we will cover some of the above mentioned Flexbox classes

<!DOCTYPE html>
<html>
<head>
        <script src="https://cdn.tailwindcss.com"></script>
</head>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-2">
        Tailwind CSS Flexbox Classes
    </h2>
    <p class="mb-2">
        The following example is illustrating the 
        combine use of Flex, Flex-wrap, Gap, and 
        Order classes. 
        
    </p>
    <div class="flex flex-wrap gap-2 mb-4">
        <div class="bg-red-500 p-4 w-32 h-28 order-5">Item 1</div>
        <div class="bg-blue-500 p-4 w-32 h-28 order-4">Item 2</div>
        <div class="bg-green-500 p-4 w-32 h-28 order-3">Item 3</div>
        <div class="bg-yellow-500 p-4 w-32 h-28 order-2">Item 4</div>
        <div class="bg-orange-500 p-4 w-32 h-28 order-1">Item 5</div>
    </div>
</body>
</html>

Example of Tailwind CSS Grid

In the following example we will cover some of the above mentioned Grid classes

<!DOCTYPE html>
<html>
<head>
        <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-2">
        Tailwind CSS Grid Classes
    </h2>
    <p class="mb-2">
        The following example is illustrating the 
        combine use of Grid, Grid-template-column, Gap, 
        and Place-items classes. 
    </p>
    <div class="grid grid-cols-3 gap-2 p-1 h-44">
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-orange-500 p-4">
                Item 1
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-blue-500 p-4">
                Item 2
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-pink-500 p-4">
                Item 3
            </div>
        </div>
    </div>
</body>
</html>