Tailwind Gap

As the title suggests, the focus of this article will be Tailwind gap class with examples.

Tailwind CSS provides the “gap” class, which is a utility class that helps add space between items in a grid or flexbox.

This class is frequently used with the “grid” or “flex” classes to build responsive layouts with consistent spacing between elements.

Tailwind Gap

Tailwind gap class has separate classes for horizontal and vertical spacing.

Table Of Content-

Tailwind Gap classes

ClassesOverview
gap-0This class removes any gaps between grid or flexbox items.
gap-x-0It sets the spacing between grid or flexbox items to 0 only in the horizontal direction.
gap-y-0It sets the spacing between grid or flexbox items to 0 only in the vertical direction.
gap-pxThis class is used to set the spacing between grid or flexbox items to 1px.
gap-x-pxThis class is used to set the horizontal spacing between grid or flexbox items to 1px.
gap-y-pxThis class is used to set the vertical spacing between grid or flexbox items to 1px.
gap-0.5The spacing between grid or flexbox items to 0.125 rem or 2px.
gap-x-0.5The horizontal spacing between grid or flexbox items to 0.125 rem or 2px.
gap-y-0.5The vertical spacing between grid or flexbox items to 0.125 rem or 2px.
gap-1This class adds a gap of 0.25rem (4px) between grid or flexbox items.
gap-x-1This class adds a horizontal gap of 0.25rem (4px) between grid or flexbox items.
gap-y-1This class adds a vertical gap of 0.25rem (4px) between grid or flexbox items.
gap-1.5Used to set the spacing between grid or flexbox items to 0.375rem (6px).
gap-x-1.5Used to set the horizontal spacing between grid or flexbox items to 0.375rem (6px).
gap-y-1.5Used to set the vertical spacing between grid or flexbox items to 0.375rem (6px).
gap-2In this case, the gap between grid or flexbox items is set to a value of 0.5rem (8px).
gap-x-2In this case, the horizontal gap between grid or flexbox items is set to a value of 0.5rem (8px).
gap-y-2In this case, the vertical gap between grid or flexbox items is set to a value of 0.5rem (8px).
gap-2.5The purpose of this class is to set the spacing between grid or flexbox items to 0.625rem (10px).
gap-x-2.5The purpose of this class is to set the horizontal spacing between grid or flexbox items to 0.625rem (10px).
gap-y-2.5The purpose of this class is to set the vertical spacing between grid or flexbox items to 0.625rem (10px).
gap-3In this class, the gap between grid or flexbox items is set to 0.75rem (12px).
gap-x-3In this class, the horizontal gap between grid or flexbox items is set to 0.75rem (12px).
gap-y-3In this class, the vertical gap between grid or flexbox items is set to 0.75rem (12px).
gap-3.5This class makes sure that the spacing between grid or flexbox items is 0.875rem (14px).
gap-x-3.5This class makes sure that the horizontal spacing between grid or flexbox items is 0.875rem (14px).
gap-y-3.5This class makes sure that the vertical spacing between grid or flexbox items is 0.875rem (14px).
gap-4This class ensures that the gap between grid or flexbox items is 1rem (16px).
gap-x-4This class ensures that the horizontal gap between grid or flexbox items is 1rem (16px).
gap-y-4This class ensures that the vertical gap between grid or flexbox items is 1rem (16px).
gap-5This class defines the spacing between grid or flexbox items to 1.25rem (20px).
gap-x-5This class defines the horizontal spacing between grid or flexbox items to 1.25rem (20px).
gap-y-5This class defines the vertical spacing between grid or flexbox items to 1.25rem (20px).
gap-6The spacing between grid or flexbox items is defined as 1.5 rem (24px).
gap-x-6The horizontal spacing between grid or flexbox items is defined as 1.5 rem (24px).
gap-y-6The vertical spacing between grid or flexbox items is defined as 1.5 rem (24px).
gap-7The flexbox or grid spacing is defined as 1.75 rem (28px).
gap-x-7The flexbox or grid horizontal spacing is defined as 1.75 rem (28px).
gap-y-7The flexbox or grid vertical spacing is defined as 1.75 rem (28px).
gap-8Grid and flexbox items are separated by 2rem (32px) using this class.
gap-x-8Grid and flexbox items are horizontally separated by 2rem (32px) using this class.
gap-y-8Grid and flexbox items are vertically separated by 2rem (32px) using this class.
gap-9Used to set the spacing between grid or flexbox items to 2.25rem (36px).
gap-x-9Used to set the horizontal spacing between grid or flexbox items to 2.25rem (36px).
gap-y-9Used to set the vertical spacing between grid or flexbox items to 2.25rem (36px).
gap-10The aim of this class is to adjust the gap between grid or flexbox items to 2.5rem (40px).
gap-x-10The aim of this class is to adjust the horizontal gap between grid or flexbox items to 2.5rem (40px).
gap-y-10The aim of this class is to adjust the vertical gap between grid or flexbox items to 2.5rem (40px).
gap-11In this case, the spacing between grid or flexbox items is specified at 2.5rem (40px).
gap-x-11In this case, the horizontal spacing between grid or flexbox items is specified at 2.5rem (40px).
gap-y-11In this case, the vertical spacing between grid or flexbox items is specified at 2.5rem (40px).
gap-12This class is responsible for setting the spacing between grid or flexbox items to 3rem (48px).
gap-x-12This class is responsible for setting the horizontal spacing between grid or flexbox items to 3rem (48px).
gap-y-12This class is responsible for setting the vertical spacing between grid or flexbox items to 3rem (48px).
gap-14This class adds a gap of 3.5rem (56px) to grid or flexbox items.
gap-x-14This class adds a horizontal gap of 3.5rem (56px) to grid or flexbox items.
gap-y-14This class adds a vertical gap of 3.5rem (56px) to grid or flexbox items.
gap-16Used to set the spacing between grid or flexbox items to 4rem (64px).
gap-x-16Used to set the horizontal spacing between grid or flexbox items to 4rem (64px).
gap-y-16Used to set the vertical spacing between grid or flexbox items to 4rem (64px).
gap-20The spacing between grid or flexbox items 5rem or 80px.
gap-x-20The horizontal spacing between grid or flexbox items 5rem or 80px.
gap-y-20The vertical spacing between grid or flexbox items 5rem or 80px.
gap-24Using this class, the spacing between grid or flexbox items is set to 6rem (96px).
gap-x-24Using this class, the horizontal spacing between grid or flexbox items is set to 6rem (96px).
gap-y-24Using this class, the vertical spacing between grid or flexbox items is set to 6rem (96px).
gap-28This class is used to set the spacing between grid or flexbox items to 7rem or 112px.
gap-x-28This class is used to set the horizontal spacing between grid or flexbox items to 7rem or 112px.
gap-y-28This class is used to set the vertical spacing between grid or flexbox items to 7rem or 112px.
gap-32Grid and flexbox items are separated by 8rem (128px) using this class.
gap-x-32Grid and flexbox items are horizontally separated by 8rem (128px) using this class.
gap-y-32Grid and flexbox items are vertically separated by 8rem (128px) using this class.
gap-36The purpose of this class is to set the spacing between grid or flexbox items to 9rem (144px).
gap-x-36The purpose of this class is to set the horizontal spacing between grid or flexbox items to 9rem (144px).
gap-y-36The purpose of this class is to set the vertical spacing between grid or flexbox items to 9rem (144px).
gap-40A gap of 10rem (160px) is added between the grid and flexbox items.
gap-x-40A horizontal gap of 10rem (160px) is added between the grid and flexbox items.
gap-y-40A vertical gap of 10rem (160px) is added between the grid and flexbox items.
gap-44Using this class, the gap between grid or flexbox items is set to 11rem (176px).
gap-x-44Using this class, the horizontal gap between grid or flexbox items is set to 11rem (176px).
gap-y-44Using this class, the vertical gap between grid or flexbox items is set to 11rem (176px).
gap-48In grid or flexbox items, this class adds 12rem (192px) of spacing.
gap-x-48In grid or flexbox items, this class adds 12rem (192px) of horizontal spacing.
gap-y-48In grid or flexbox items, this class adds 12rem (192px) of vertical spacing.
gap-52This class is responsible for setting the spacing between grid or flexbox items to 13rem (208px).
gap-x-52This class is responsible for setting the horizontal spacing between grid or flexbox items to 13rem (208px).
gap-y-52This class is responsible for setting the vertical spacing between grid or flexbox items to 13rem (208px).
gap-56This class is used to set the spacing between grid or flex items to 14rem (224px).
gap-x-56This class is used to set the horizontal spacing between grid or flex items to 14rem (224px).
gap-y-56This class is used to set the vertical spacing between grid or flex items to 14rem (224px).
gap-60It sets the spacing between grid or flex items to 15rem (240px).
gap-x-60It sets the horizontal spacing between grid or flex items to 15rem (240px).
gap-y-60It sets the vertical spacing between grid or flex items to 15rem (240px).
gap-64The gap between the flex or grid items is defined as 16rem (256px).
gap-x-64The horizontal gap between the flex or grid items is defined as 16rem (256px).
gap-y-64The vertical gap between the flex or grid items is defined as 16rem (256px).
gap-72In this case, the spacing between the flexbox and grid items is defined as 18rem (288px).
gap-x-72In this case, the horizontal spacing between the flexbox and grid items is defined as 18rem (288px).
gap-y-72In this case, the vertical spacing between the flexbox and grid items is defined as 18rem (288px).
gap-80This class defines the separation between the items in a flexbox or grid container to 20rem (320px).
gap-x-80This class defines the horizontal separation between the items in a flexbox or grid container to 20rem (320px).
gap-y-80This class defines the vertical separation between the items in a flexbox or grid container to 20rem (320px).
gap-96The goal of this class is to separate the grid or flexbox items by 24rem (384px).
gap-x-96The goal of this class is to horizontally separate the grid or flexbox items by 24rem (384px).
gap-y-96The goal of this class is to vertically separate the grid or flexbox items by 24rem (384px).
gap-numberThis is used to apply spacing both horizontally and vertically according to the number used.

Syntax

<element class="gap-number"> </element>

This example illustrates the usage of gap-5 and gap-1 classes in Tailwind:

Example: 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2 text-slate-800">Gap Class in Tailwind CSS</p> <div class="font-medium p-2 border-2 rounded-t-md"> <h1 class="text-gray-500">gap-5</h1> <div class="flex justify-center gap-5 flex-wrap"> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">1st</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">2nd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">3rd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">4th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">5th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">6th</div> </div> </div> <div class="font-medium p-2 border-2 rounded-b-md"> <h1 class="text-gray-500">gap-1</h1> <div class="flex justify-center gap-1 flex-wrap"> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">1st</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">2nd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">3rd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">4th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">5th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">6th</div> </div> </div> </body> </html>

Tailwind gap-x-number

Using this class the spacing would only be applied horizontally.

Syntax

<element class="gap-x-number"> </element>
The example below provides an implementation of the gap-x-5 and gap-x-1 classes in Tailwind:

Example: 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2 text-slate-800">Gap Class in Tailwind CSS</p> <div class="font-medium p-2 border-2 rounded-t-md"> <h1 class="text-gray-500">gap-x-5</h1> <div class="flex justify-center gap-x-5 flex-wrap"> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">1st</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">2nd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">3rd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">4th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">5th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">6th</div> </div> </div> <div class="font-medium p-2 border-2 rounded-b-md"> <h1 class="text-gray-500">gap-x-1</h1> <div class="flex justify-center gap-x-1 flex-wrap"> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">1st</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">2nd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">3rd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">4th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">5th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">6th</div> </div> </div> </body> </html>

Tailwind gap-y-number

Using this utility the spacing would only be applied vertically.

Syntax

<element class="gap-y-number"> </element>
Here’s an example that demonstrates the operation of gap-y-5 and gap-y-1 classes in Tailwind:

Example: 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2 text-slate-800">Gap Class in Tailwind CSS</p> <div class="font-medium p-2 border-2 rounded-t-md"> <h1 class="text-gray-500">gap-y-5</h1> <div class="flex justify-center gap-y-5 flex-wrap"> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">1st</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">2nd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">3rd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">4th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">5th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">6th</div> </div> </div> <div class="font-medium p-2 border-2 rounded-b-md"> <h1 class="text-gray-500">gap-y-1</h1> <div class="flex justify-center gap-y-1 flex-wrap"> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">1st</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">2nd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">3rd</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">4th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">5th</div> <div class="bg-gray-300 rounded-lg m-4 w-32 h-12">6th</div> </div> </div> </body> </html>
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *