Tailwind CSS Gap

This class accepts more than one value in tailwind CSS all the properties are covered as in class form. It is the alternative to the CSS gap property. This class is used to set the spacing also caller gutter between the rows and columns. As like column-gap and row-gap using separately both so that one can use simply gap property that can given column as well as row gap.

Gap: There are total of 105 class for gap, x and y axis separately included also.

• gap-0
• gap-x-0
• gap-y-0
• gap-0.5
• gap-x-0.5
• gap-y-0.5
• gap-1
• gap-x-1
• gap-y-1
• gap-1.5
• gap-x-1.5
• gap-y-1.5
• gap-2
• gap-x-2
• gap-y-2
• gap-2.5
• gap-x-2.5
• gap-y-2.5
• gap-3
• gap-x-3  
• gap-y-3  
• gap-3.5  
• gap-x-3.5
• gap-y-3.5
• gap-4  
• gap-x-4
• gap-y-4
• gap-5
• gap-x-5
• gap-y-5
• gap-6  
• gap-x-6
• gap-y-6
• gap-7
• gap-x-7
• gap-y-7
• gap-8  
• gap-x-8
• gap-y-8  
• gap-9  
• gap-x-9
• gap-y-9  
• gap-10  
• gap-x-10  
• gap-y-10  
• gap-11
• gap-x-11  
• gap-y-11  
• gap-12  
• gap-x-12  
• gap-y-12  
• gap-14  
• gap-x-14  
• gap-y-14  
• gap-16  
• gap-x-16  
• gap-y-16  
• gap-20  
• gap-x-20  
• gap-y-20  
• gap-24  
• gap-x-24  
• gap-y-24  
• gap-28  
• gap-x-28  
• gap-y-28  
• gap-32  
• gap-x-32  
• gap-y-32  
• gap-36  
• gap-x-36  
• gap-y-36  
• gap-40  
• gap-x-40  
• gap-y-40  
• gap-44  
• gap-x-44
• gap-y-44
• gap-48  
• gap-x-48  
• gap-y-48  
• gap-52  
• gap-x-52
• gap-y-52
• gap-56  
• gap-x-56
• gap-y-56
• gap-60  
• gap-x-60
• gap-y-60
• gap-64  
• gap-x-64
• gap-y-64
• gap-72  
• gap-x-72
• gap-y-72
• gap-80  
• gap-x-80
• gap-y-80
• gap-96  
• gap-x-96
• gap-y-96
• gap-px  
• gap-x-px
• gap-y-px

gap-number: By using only gap class without mentioning the axis will keep the in both axis according to the mentioned number:

Syntax:

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

Parameter: This class accept a single value as mentioned above and described below:

• number: Holds the gap size of the element.

Example:

Output:

👁 Image

gap-x-number: By using the gap-x class will keep the gap in x-axis according to the mentioned number:

Syntax:

<element class="gap-x-number"> Contents... </element>

Example:

Output:

👁 Image

gap-y-number: By using the gap-y class will keep the gap in x-axis according to the mentioned number:

Syntax:

<element class="gap-y-number"> Contents... </element>

Example:

Output:

👁 Image