Gap

Defines the size of the gap between the rows and columns. It is a shorthand for column-gap and row-gap.

Classes#

ClassProperties
gap-0gap: 0;
gap-1gap: 0.25rem;
gap-2gap: 0.5rem;
gap-3gap: 1rem;
gap-4gap: 1.5rem;
gap-5gap: 2rem;
gap-6gap: 3rem;
gap-7gap: 4rem;
gap-8gap: 5rem;
row-gap-0row-gap: 0;
row-gap-1row-gap: 0.25rem;
row-gap-2row-gap: 0.5rem;
row-gap-3row-gap: 1rem;
row-gap-4row-gap: 1.5rem;
row-gap-5row-gap: 2rem;
row-gap-6row-gap: 3rem;
row-gap-7row-gap: 4rem;
row-gap-8row-gap: 5rem;
column-gap-0column-gap: 0;
column-gap-1column-gap: 0.25rem;
column-gap-2column-gap: 0.5rem;
column-gap-3column-gap: 1rem;
column-gap-4column-gap: 1.5rem;
column-gap-5column-gap: 2rem;
column-gap-6column-gap: 3rem;
column-gap-7column-gap: 4rem;
column-gap-8column-gap: 5rem;

Examples#

1
2
3
4
<div class="flex flex-wrap justify-content-center gap-3">
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">1</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">2</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">3</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">4</div>
</div>
 
1
2
3
4
5
6
7
8
<div class="flex flex-wrap column-gap-4 row-gap-6">
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">1</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">2</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">3</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">4</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">5</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">6</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">7</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">8</div>
</div>
 

Responsive#

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:gap-2 to use a responsive class.

ClassDescription
sm:small screens e.g. phones
md:medium screens e.g. tablets
lg:large screens e.g. notebooks
xl:larger screens e.g monitors
1
2
<div class="flex flex-wrap gap-1 md:gap-4 xl:gap-8">
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">1</div>
    <div class="border-round w-12rem h-6rem bg-primary font-bold flex align-items-center justify-content-center">2</div>
</div>
 
        PrimeFlex 3.3.1 by PrimeTek