Tailwind CSS - Gap

Previous
Quiz
Next

Tailwind CSS Gap is a utility class used to add space between grid and flex items.

Tailwind CSS Gap Classes

The following is the list of Tailwind CSS Gap classes that helps to insert space between gri and flex items.

Class CSS Properties
gap-0 gap: 0px;
gap-x-0 column-gap: 0px;
gap-y-0 row-gap: 0px;
gap-px gap: 1px;
gap-x-px column-gap: 1px;
gap-y-px row-gap: 1px;
gap-0.5 gap: 0.125rem; /* 2px */
gap-x-0.5 column-gap: 0.125rem; /* 2px */
gap-y-0.5 row-gap: 0.125rem; /* 2px */
gap-1 gap: 0.25rem; /* 4px */
gap-x-1 column-gap: 0.25rem; /* 4px */
gap-y-1 row-gap: 0.25rem; /* 4px */
gap-1.5 gap: 0.375rem; /* 6px */
gap-x-1.5 column-gap: 0.375rem; /* 6px */
gap-y-1.5 row-gap: 0.375rem; /* 6px */
gap-2 gap: 0.5rem; /* 8px */
gap-x-2 column-gap: 0.5rem; /* 8px */
gap-y-2 row-gap: 0.5rem; /* 8px */
gap-2.5 gap: 0.625rem; /* 10px */
gap-x-2.5 column-gap: 0.625rem; /* 10px */
gap-y-2.5 row-gap: 0.625rem; /* 10px */
gap-3 gap: 0.75rem; /* 12px */
gap-x-3 column-gap: 0.75rem; /* 12px */
gap-y-3 row-gap: 0.75rem; /* 12px */
gap-3.5 gap: 0.875rem; /* 14px */
gap-x-3.5 column-gap: 0.875rem; /* 14px */
gap-y-3.5 row-gap: 0.875rem; /* 14px */
gap-4 gap: 1rem; /* 16px */
gap-x-4 column-gap: 1rem; /* 16px */
gap-y-4 row-gap: 1rem; /* 16px */
gap-5 gap: 1.25rem; /* 20px */
gap-x-5 column-gap: 1.25rem; /* 20px */
gap-y-5 row-gap: 1.25rem; /* 20px */
gap-6 gap: 1.5rem; /* 24px */
gap-x-6 column-gap: 1.5rem; /* 24px */
gap-y-6 row-gap: 1.5rem; /* 24px */
gap-7 gap: 1.75rem; /* 28px */
gap-x-7 column-gap: 1.75rem; /* 28px */
gap-y-7 row-gap: 1.75rem; /* 28px */
gap-8 gap: 2rem; /* 32px */
gap-x-8 column-gap: 2rem; /* 32px */
gap-y-8 row-gap: 2rem; /* 32px */
gap-9 gap: 2.25rem; /* 36px */
gap-x-9 column-gap: 2.25rem; /* 36px */
gap-y-9 row-gap: 2.25rem; /* 36px */
gap-10 gap: 2.5rem; /* 40px */
gap-x-10 column-gap: 2.5rem; /* 40px */
gap-y-10 row-gap: 2.5rem; /* 40px */
gap-11 gap: 2.75rem; /* 44px */
gap-x-11 column-gap: 2.75rem; /* 44px */
gap-y-11 row-gap: 2.75rem; /* 44px */
gap-12 gap: 3rem; /* 48px */
gap-x-12 column-gap: 3rem; /* 48px */
gap-y-12 row-gap: 3rem; /* 48px */
gap-14 gap: 3.5rem; /* 56px */
gap-x-14 column-gap: 3.5rem; /* 56px */
gap-y-14 row-gap: 3.5rem; /* 56px */
gap-16 gap: 4rem; /* 64px */
gap-x-16 column-gap: 4rem; /* 64px */
gap-y-16 row-gap: 4rem; /* 64px */
gap-20 gap: 5rem; /* 80px */
gap-x-20 column-gap: 5rem; /* 80px */
gap-y-20 row-gap: 5rem; /* 80px */
gap-24 gap: 6rem; /* 96px */
gap-x-24 column-gap: 6rem; /* 96px */
gap-y-24 row-gap: 6rem; /* 96px */
gap-28 gap: 7rem; /* 112px */
gap-x-28 column-gap: 7rem; /* 112px */
gap-y-28 row-gap: 7rem; /* 112px */
gap-32 gap: 8rem; /* 128px */
gap-x-32 column-gap: 8rem; /* 128px */
gap-y-32 row-gap: 8rem; /* 128px */
gap-36 gap: 9rem; /* 144px */
gap-x-36 column-gap: 9rem; /* 144px */
gap-y-36 row-gap: 9rem; /* 144px */
gap-40 gap: 10rem; /* 160px */
gap-x-40 column-gap: 10rem; /* 160px */
gap-y-40 row-gap: 10rem; /* 160px */
gap-44 gap: 11rem; /* 176px */
gap-x-44 column-gap: 11rem; /* 176px */
gap-y-44 row-gap: 11rem; /* 176px */
gap-48 gap: 12rem; /* 192px */
gap-x-48 column-gap: 12rem; /* 192px */
gap-y-48 row-gap: 12rem; /* 192px */
gap-52 gap: 13rem; /* 208px */
gap-x-52 column-gap: 13rem; /* 208px */
gap-y-52 row-gap: 13rem; /* 208px */
gap-56 gap: 14rem; /* 224px */
gap-x-56 column-gap: 14rem; /* 224px */
gap-y-56 row-gap: 14rem; /* 224px */
gap-60 gap: 15rem; /* 240px */
gap-x-60 column-gap: 15rem; /* 240px */
gap-y-60 row-gap: 15rem; /* 240px */
gap-64 gap: 16rem; /* 256px */
gap-x-64 column-gap: 16rem; /* 256px */
gap-y-64 row-gap: 16rem; /* 256px */
gap-72 gap: 18rem; /* 288px */
gap-x-72 column-gap: 18rem; /* 288px */
gap-y-72 row-gap: 18rem; /* 288px */
gap-80 gap: 20rem; /* 320px */
gap-x-80 column-gap: 20rem; /* 320px */
gap-y-80 row-gap: 20rem; /* 320px */
gap-96 gap: 24rem; /* 384px */
gap-x-96 column-gap: 24rem; /* 384px */
gap-y-96 row-gap: 24rem; /* 384px */

Functionality of Tailwind CSS Gap Classes

  • gap-*: This class is used to insert gaps between both rows and columns independently, with {*} representing the gap proportion that can be replaced by the desired value.
  • gap-x-*: This class is used to insert a gap between rows or a horizontal gap, with {*} representing the gap proportion that can be replaced by the desired value.
  • gap-y-*: This class is used to insert a gap between columns or a vertical gap, with {*} representing the gap proportion that can be replaced by the desired value.

Tailwind CSS Gap Classes Examples

The following examples will illustrate the Tailwind CSS Gap class utility.

Spacing Flex Items

The gap-* utility is used to add both rows and columns gap together between flex items, as demonstrated in the example below.

Example

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Gap Class on flex Container
    </h2>
    <div class="flex flex-wrap gap-4">
        <div class="bg-green-500 p-6 w-28 h-28 ">01</div>
        <div class="bg-green-300 p-6 w-28 h-28">02</div>
        <div class="bg-green-500 p-6 w-28 h-28">03</div>
        <div class="bg-green-300 p-6 w-28 h-28">04</div>
        <div class="bg-green-500 p-6 w-28 h-28">05</div>
        <div class="bg-green-300 p-6 w-28 h-28">06</div>
    </div>
</body>

</html>

Spacing Grid Items

The gap-* utility is used to add both rows and columns gap together between grid items, as demonstrated in the example below.

Example

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Gap Class on Grid Container
    </h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-green-500 p-6 w-full h-28 ">01</div>
        <div class="bg-green-300 p-6 w-full h-28">02</div>
        <div class="bg-green-500 p-6 w-full h-28">03</div>
        <div class="bg-green-300 p-6 w-full h-28">04</div>
        <div class="bg-green-500 p-6 w-full h-28">05</div>
        <div class="bg-green-300 p-6 w-full h-28">06</div>
    </div>
</body>

</html>

Flex Item Spacing in Rows & Columns

The gap-x-* & gap-y-* utilities are used to add gaps between rows and columns of flex items, as shown in the example below.

Example

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Gap-x-3 & Gap-y-3 Class on Flex Container
    </h2>
    <div class="flex flex-wrap gap-x-3 gap-y-3">
        <div class="bg-green-500 p-6 w-28 h-28 ">01</div>
        <div class="bg-green-300 p-6 w-28 h-28">02</div>
        <div class="bg-green-500 p-6 w-28 h-28">03</div>
        <div class="bg-green-300 p-6 w-28 h-28">04</div>
        <div class="bg-green-500 p-6 w-28 h-28">05</div>
        <div class="bg-green-300 p-6 w-28 h-28">06</div>
    </div>
</body>

</html>

Grid Item Spacing in Rows & Columns

The gap-x-* & gap-y-* utility is used to add rows gap and columns gap between grid items, as demonstrated in the example below.

Example

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Gap-x-4 & Gap-y-4 Class on Grid Container
    </h2>
    <div class="grid grid-cols-3 gap-x-3 gap-y-3">
        <div class="bg-green-500 p-6 w-full h-28 ">01</div>
        <div class="bg-green-300 p-6 w-full h-28">02</div>
        <div class="bg-green-500 p-6 w-full h-28">03</div>
        <div class="bg-green-300 p-6 w-full h-28">04</div>
        <div class="bg-green-500 p-6 w-full h-28">05</div>
        <div class="bg-green-300 p-6 w-full h-28">06</div>
    </div>
</body>

</html>
Print Page
Previous
Next