tailwind css gap tutorial example

In this section we will see how to use gap class in tailwind css. Using grid and flex gap class we can set space between in both rows and columns. we will see gap class with grid and flex box, gap with row gap-x-{size}, gap with columns gap-y-{size}, responsive gap class, custom size gap class tutorial example with Tailwind CSS 3

How to install & setup Tailwind CSS v3


Example 1

Tailwind CSS use gap-{size} to change the gap between both rows and columns in grid layouts.

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tailwind CSS Gap Tutorial Example</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>

    <body>
        <div class="grid grid-cols-4 gap-4">
            <div class="p-4 text-white bg-green-500">div 1</div>
            <div class="p-4 text-white bg-green-500">div 2</div>
            <div class="p-4 text-white bg-green-500">div 3</div>
            <div class="p-4 text-white bg-green-500">div 4</div>
            <div class="p-4 text-white bg-green-500">div 5</div>
            <div class="p-4 text-white bg-green-500">div 6</div>
            <div class="p-4 text-white bg-green-500">div 7</div>
            <div class="p-4 text-white bg-green-500">div 8</div>
        </div>
    </body>

</html>
tailwind grid space between with gap class

tailwind grid space between with gap class


Example 2

Tailwind CSS use gap-{size} to change the gap between both rows and columns in flex layouts.

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Tailwind CSS Gap layout with flex</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>

    <body>
        <div class="flex gap-4">
            <div class="p-4 text-white bg-green-500">div 1</div>
            <div class="p-4 text-white bg-green-500">div 2</div>
            <div class="p-4 text-white bg-green-500">div 3</div>
            <div class="p-4 text-white bg-green-500">div 4</div>
            <div class="p-4 text-white bg-green-500">div 5</div>
            <div class="p-4 text-white bg-green-500">div 6</div>
            <div class="p-4 text-white bg-green-500">div 7</div>
            <div class="p-4 text-white bg-green-500">div 8</div>
        </div>
    </body>

</html>
tailwind flex space between with gap class

tailwind flex space between with gap class


Example 3

tailwind css gap class with gap-x-{size} to change row in gaps.

<div class="grid grid-cols-4 gap-x-8">
    <div class="p-4 text-white bg-green-500">div 1</div>
    <div class="p-4 text-white bg-green-500">div 2</div>
    <div class="p-4 text-white bg-green-500">div 3</div>
    <div class="p-4 text-white bg-green-500">div 4</div>
</div>
tailwind gap-x-{size} row

tailwind gap-x-{size} row


tailwind css gap class with gap-y-{size} to change column in gaps

<div class="grid grid-cols-4 gap-y-12 gap-x-2">
    <div class="p-4 text-white bg-green-500">div 1</div>
    <div class="p-4 text-white bg-green-500">div 2</div>
    <div class="p-4 text-white bg-green-500">div 3</div>
    <div class="p-4 text-white bg-green-500">div 4</div>
    <div class="p-4 text-white bg-green-500">div 5</div>
    <div class="p-4 text-white bg-green-500">div 6</div>
    <div class="p-4 text-white bg-green-500">div 7</div>
    <div class="p-4 text-white bg-green-500">div 8</div>
</div>
tailwind gap-y-{size} columns

tailwind gap-y-{size} columns


tailwind css responsive gap class.

<div class="grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-12 md:gap-8 sm:gap-6">
    <div class="p-4 text-white bg-green-500">div 1</div>
    <div class="p-4 text-white bg-green-500">div 2</div>
    <div class="p-4 text-white bg-green-500">div 3</div>
    <div class="p-4 text-white bg-green-500">div 4</div>
</div>



Example 4

tailwind gap class with custom px size.

<div class="grid grid-cols-4 gap-[80px]">
    <div class="p-4 text-white bg-green-500">div 1</div>
    <div class="p-4 text-white bg-green-500">div 2</div>
    <div class="p-4 text-white bg-green-500">div 3</div>
    <div class="p-4 text-white bg-green-500">div 4</div>
</div>


tailwind css gap with custom rem size.

<div class="grid grid-cols-4 gap-[5rem]">
    <div class="p-4 text-white bg-green-500">div 1</div>
    <div class="p-4 text-white bg-green-500">div 2</div>
    <div class="p-4 text-white bg-green-500">div 3</div>
    <div class="p-4 text-white bg-green-500">div 4</div>
</div>


Example 5

tailwind css card grid space between using gap class.

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Card grid with gap class</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <div class="grid gap-6 lg:grid-cols-4">
      <div class="w-full rounded-lg shadow-md lg:max-w-sm">
        <div class="p-4">
          <h4 class="text-xl font-semibold">
            Tailwind CSS gap with card grid 1
          </h4>
          <p class="mb-2 leading-normal">
            Tailwind CSS card description Lorem ipsum dolor sit amet consectetur
          </p>
          <button class="px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
            Read more
          </button>
        </div>
      </div>
      <div class="w-full rounded-lg shadow-md lg:max-w-sm">
        <div class="p-4">
          <h4 class="text-xl font-semibold ">
            Tailwind CSS gap with card grid 2
          </h4>
          <p class="mb-2 leading-normal">
            Tailwind CSS card description Lorem ipsum dolor sit amet consectetur
          </p>
          <button class="px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
            Read more
          </button>
        </div>
      </div>
      <div class="w-full rounded-lg shadow-md lg:max-w-sm">
        <div class="p-4">
          <h4 class="text-xl font-semibold">
            Tailwind CSS gap with card grid 3
          </h4>
          <p class="mb-2 leading-normal">
            Tailwind CSS card description Lorem ipsum dolor sit amet consectetur
          </p>
          <button class="px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
            Read more
          </button>
        </div>
      </div>
      <div class="w-full rounded-lg shadow-md lg:max-w-sm">
        <div class="p-4">
          <h4 class="text-xl font-semibold">
            Tailwind CSS gap with card grid 4
          </h4>
          <p class="mb-2 leading-normal">
            Tailwind CSS card description Lorem ipsum dolor sit amet consectetur
          </p>
          <button class="px-4 py-2 text-sm text-blue-100 bg-blue-500 rounded shadow">
            Read more
          </button>
        </div>
      </div>

    </div>
  </body>

</html>
tailwind grid card with gap class

tailwind grid card with gap class