Press/to search

Spacing

Equal v1.0.8

Utilities for sets balancing the space in between child elements.


Class

classcss
equal-x-px--equal-x-reverse: 0;
margin-right: calc(1px * var(--equal-x-reverse));
margin-left: calc(1px * calc(1 - var(--equal-x-reverse)))
equal-x-0--equal-x-reverse: 0;
margin-right: calc(0 * var(--equal-x-reverse));
margin-left: calc(0 * calc(1 - var(--equal-x-reverse)))
equal-x-1--equal-x-reverse: 0;
margin-right: calc(0.25rem * var(--equal-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--equal-x-reverse)))
equal-x-2--equal-x-reverse: 0;
margin-right: calc(0.5rem * var(--equal-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--equal-x-reverse)))
equal-x-3--equal-x-reverse: 0;
margin-right: calc(0.75rem * var(--equal-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--equal-x-reverse)))
equal-x-4--equal-x-reverse: 0;
margin-right: calc(1rem * var(--equal-x-reverse));
margin-left: calc(1rem * calc(1 - var(--equal-x-reverse)))
equal-x-5--equal-x-reverse: 0;
margin-right: calc(1.25rem * var(--equal-x-reverse));
margin-left: calc(1.25rem * calc(1 - var(--equal-x-reverse)))
equal-x-6--equal-x-reverse: 0;
margin-right: calc(1.5rem * var(--equal-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--equal-x-reverse)))
equal-x-8--equal-x-reverse: 0;
margin-right: calc(2rem * var(--equal-x-reverse));
margin-left: calc(2rem * calc(1 - var(--equal-x-reverse)))
equal-x-10--equal-x-reverse: 0;
margin-right: calc(2.5rem * var(--equal-x-reverse));
margin-left: calc(2.5rem * calc(1 - var(--equal-x-reverse)))
equal-x-12--equal-x-reverse: 0;
margin-right: calc(3rem * var(--equal-x-reverse));
margin-left: calc(3rem * calc(1 - var(--equal-x-reverse)))
equal-x-16--equal-x-reverse: 0;
margin-right: calc(4rem * var(--equal-x-reverse));
margin-left: calc(4rem * calc(1 - var(--equal-x-reverse)))
equal-x-20--equal-x-reverse: 0;
margin-right: calc(5rem * var(--equal-x-reverse));
margin-left: calc(5rem * calc(1 - var(--equal-x-reverse)))
equal-x-24--equal-x-reverse: 0;
margin-right: calc(6rem * var(--equal-x-reverse));
margin-left: calc(6rem * calc(1 - var(--equal-x-reverse)))
equal-x-32--equal-x-reverse: 0;
margin-right: calc(8rem * var(--equal-x-reverse));
margin-left: calc(8rem * calc(1 - var(--equal-x-reverse)))
equal-x-40--equal-x-reverse: 0;
margin-right: calc(10rem * var(--equal-x-reverse));
margin-left: calc(10rem * calc(1 - var(--equal-x-reverse)))
equal-x-48--equal-x-reverse: 0;
margin-right: calc(12rem * var(--equal-x-reverse));
margin-left: calc(12rem * calc(1 - var(--equal-x-reverse)))
equal-x-56--equal-x-reverse: 0;
margin-right: calc(14rem * var(--equal-x-reverse));
margin-left: calc(14rem * calc(1 - var(--equal-x-reverse)))
equal-x-64--equal-x-reverse: 0;
margin-right: calc(16rem * var(--equal-x-reverse));
margin-left: calc(16rem * calc(1 - var(--equal-x-reverse)))
equal-x-72 v1.1.3--equal-x-reverse: 0;
margin-right: calc(18rem * var(--equal-x-reverse));
margin-left: calc(18rem * calc(1 - var(--equal-x-reverse)))
equal-x-80 v1.1.3--equal-x-reverse: 0;
margin-right: calc(20rem * var(--equal-x-reverse));
margin-left: calc(20rem * calc(1 - var(--equal-x-reverse)))
equal-x-88 v1.1.3--equal-x-reverse: 0;
margin-right: calc(22rem * var(--equal-x-reverse));
margin-left: calc(22rem * calc(1 - var(--equal-x-reverse)))
equal-x-96 v1.1.3--equal-x-reverse: 0;
margin-right: calc(24rem * var(--equal-x-reverse));
margin-left: calc(24rem * calc(1 - var(--equal-x-reverse)))
equal-x-104 v1.1.3--equal-x-reverse: 0;
margin-right: calc(26rem * var(--equal-x-reverse));
margin-left: calc(26rem * calc(1 - var(--equal-x-reverse)))
equal-x-112 v1.1.3--equal-x-reverse: 0;
margin-right: calc(28rem * var(--equal-x-reverse));
margin-left: calc(28rem * calc(1 - var(--equal-x-reverse)))
-equal-x-px--equal-x-reverse: 0;
margin-right: calc(-1px * var(--equal-x-reverse));
margin-left: calc(-1px * calc(1 - var(--equal-x-reverse)))
-equal-x-1--equal-x-reverse: 0;
margin-right: calc(-0.25rem * var(--equal-x-reverse));
margin-left: calc(-0.25rem * calc(1 - var(--equal-x-reverse)))
-equal-x-2--equal-x-reverse: 0;
margin-right: calc(-0.5rem * var(--equal-x-reverse));
margin-left: calc(-0.5rem * calc(1 - var(--equal-x-reverse)))
-equal-x-3--equal-x-reverse: 0;
margin-right: calc(-0.75rem * var(--equal-x-reverse));
margin-left: calc(-0.75rem * calc(1 - var(--equal-x-reverse)))
-equal-x-4--equal-x-reverse: 0;
margin-right: calc(-1rem * var(--equal-x-reverse));
margin-left: calc(-1rem * calc(1 - var(--equal-x-reverse)))
-equal-x-5--equal-x-reverse: 0;
margin-right: calc(-1.25rem * var(--equal-x-reverse));
margin-left: calc(-1.25rem * calc(1 - var(--equal-x-reverse)))
-equal-x-6--equal-x-reverse: 0;
margin-right: calc(-1.5rem * var(--equal-x-reverse));
margin-left: calc(-1.5rem * calc(1 - var(--equal-x-reverse)))
-equal-x-8--equal-x-reverse: 0;
margin-right: calc(-2rem * var(--equal-x-reverse));
margin-left: calc(-2rem * calc(1 - var(--equal-x-reverse)))
-equal-x-10--equal-x-reverse: 0;
margin-right: calc(-2.5rem * var(--equal-x-reverse));
margin-left: calc(-2.5rem * calc(1 - var(--equal-x-reverse)))
-equal-x-12--equal-x-reverse: 0;
margin-right: calc(-3rem * var(--equal-x-reverse));
margin-left: calc(-3rem * calc(1 - var(--equal-x-reverse)))
-equal-x-16--equal-x-reverse: 0;
margin-right: calc(-4rem * var(--equal-x-reverse));
margin-left: calc(-4rem * calc(1 - var(--equal-x-reverse)))
-equal-x-20--equal-x-reverse: 0;
margin-right: calc(-5rem * var(--equal-x-reverse));
margin-left: calc(-5rem * calc(1 - var(--equal-x-reverse)))
-equal-x-24--equal-x-reverse: 0;
margin-right: calc(-6rem * var(--equal-x-reverse));
margin-left: calc(-6rem * calc(1 - var(--equal-x-reverse)))
-equal-x-32--equal-x-reverse: 0;
margin-right: calc(-8rem * var(--equal-x-reverse));
margin-left: calc(-8rem * calc(1 - var(--equal-x-reverse)))
-equal-x-40--equal-x-reverse: 0;
margin-right: calc(-10rem * var(--equal-x-reverse));
margin-left: calc(-10rem * calc(1 - var(--equal-x-reverse)))
-equal-x-48--equal-x-reverse: 0;
margin-right: calc(-12rem * var(--equal-x-reverse));
margin-left: calc(-12rem * calc(1 - var(--equal-x-reverse)))
-equal-x-56--equal-x-reverse: 0;
margin-right: calc(-14rem * var(--equal-x-reverse));
margin-left: calc(-14rem * calc(1 - var(--equal-x-reverse)))
-equal-x-64--equal-x-reverse: 0;
margin-right: calc(-16rem * var(--equal-x-reverse));
margin-left: calc(-16rem * calc(1 - var(--equal-x-reverse)))
-equal-x-72 v1.1.3--equal-x-reverse: 0;
margin-right: calc(-18rem * var(--equal-x-reverse));
margin-left: calc(-18rem * calc(1 - var(--equal-x-reverse)))
-equal-x-80 v1.1.3--equal-x-reverse: 0;
margin-right: calc(-20rem * var(--equal-x-reverse));
margin-left: calc(-20rem * calc(1 - var(--equal-x-reverse)))
-equal-x-88 v1.1.3--equal-x-reverse: 0;
margin-right: calc(-22rem * var(--equal-x-reverse));
margin-left: calc(-22rem * calc(1 - var(--equal-x-reverse)))
-equal-x-96 v1.1.3--equal-x-reverse: 0;
margin-right: calc(-24rem * var(--equal-x-reverse));
margin-left: calc(-24rem * calc(1 - var(--equal-x-reverse)))
-equal-x-104 v1.1.3--equal-x-reverse: 0;
margin-right: calc(-26rem * var(--equal-x-reverse));
margin-left: calc(-26rem * calc(1 - var(--equal-x-reverse)))
-equal-x-112 v1.1.3--equal-x-reverse: 0;
margin-right: calc(-28rem * var(--equal-x-reverse));
margin-left: calc(-28rem * calc(1 - var(--equal-x-reverse)))
classcss
equal-y-px--equal-y-reverse: 0;
margin-top: calc(1px * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(1px * var(--equal-y-reverse))
equal-y-0--equal-y-reverse: 0;
margin-top: calc(0 * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(0 * var(--equal-y-reverse))
equal-y-1--equal-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(0.25rem * var(--equal-y-reverse))
equal-y-2--equal-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(0.5rem * var(--equal-y-reverse))
equal-y-3--equal-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(0.75rem * var(--equal-y-reverse))
equal-y-4--equal-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(1rem * var(--equal-y-reverse))
equal-y-5--equal-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(1.25rem * var(--equal-y-reverse))
equal-y-6--equal-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(1.5rem * var(--equal-y-reverse))
equal-y-8--equal-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(2rem * var(--equal-y-reverse))
equal-y-10--equal-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(2.5rem * var(--equal-y-reverse))
equal-y-12--equal-y-reverse: 0;
margin-top: calc(3rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(3rem * var(--equal-y-reverse))
equal-y-16--equal-y-reverse: 0;
margin-top: calc(4rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(4rem * var(--equal-y-reverse))
equal-y-20--equal-y-reverse: 0;
margin-top: calc(5rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(5rem * var(--equal-y-reverse))
equal-y-24--equal-y-reverse: 0;
margin-top: calc(6rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(6rem * var(--equal-y-reverse))
equal-y-32--equal-y-reverse: 0;
margin-top: calc(8rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(8rem * var(--equal-y-reverse))
equal-y-40--equal-y-reverse: 0;
margin-top: calc(10rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(10rem * var(--equal-y-reverse))
equal-y-48--equal-y-reverse: 0;
margin-top: calc(12rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(12rem * var(--equal-y-reverse))
equal-y-56--equal-y-reverse: 0;
margin-top: calc(14rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(14rem * var(--equal-y-reverse))
equal-y-64--equal-y-reverse: 0;
margin-top: calc(16rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(16rem * var(--equal-y-reverse))
equal-y-72 v1.1.3--equal-y-reverse: 0;
margin-top: calc(18rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(18rem * var(--equal-y-reverse))
equal-y-80 v1.1.3--equal-y-reverse: 0;
margin-top: calc(20rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(20rem * var(--equal-y-reverse))
equal-y-88 v1.1.3--equal-y-reverse: 0;
margin-top: calc(22rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(22rem * var(--equal-y-reverse))
equal-y-96 v1.1.3--equal-y-reverse: 0;
margin-top: calc(24rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(24rem * var(--equal-y-reverse))
equal-y-104 v1.1.3--equal-y-reverse: 0;
margin-top: calc(26rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(26rem * var(--equal-y-reverse))
equal-y-112 v1.1.3--equal-y-reverse: 0;
margin-top: calc(28rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(28rem * var(--equal-y-reverse))
-equal-y-px--equal-y-reverse: 0;
margin-top: calc(-1px * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-1px * var(--equal-y-reverse))
-equal-y-1--equal-y-reverse: 0;
margin-top: calc(-0.25rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-0.25rem * var(--equal-y-reverse))
-equal-y-2--equal-y-reverse: 0;
margin-top: calc(-0.5rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-0.5rem * var(--equal-y-reverse))
-equal-y-3--equal-y-reverse: 0;
margin-top: calc(-0.75rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-0.75rem * var(--equal-y-reverse))
-equal-y-4--equal-y-reverse: 0;
margin-top: calc(-1rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-1rem * var(--equal-y-reverse))
-equal-y-5--equal-y-reverse: 0;
margin-top: calc(-1.25rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-1.25rem * var(--equal-y-reverse))
-equal-y-6--equal-y-reverse: 0;
margin-top: calc(-1.5rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-1.5rem * var(--equal-y-reverse))
-equal-y-8--equal-y-reverse: 0;
margin-top: calc(-2rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-2rem * var(--equal-y-reverse))
-equal-y-10--equal-y-reverse: 0;
margin-top: calc(-2.5rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-2.5rem * var(--equal-y-reverse))
-equal-y-12--equal-y-reverse: 0;
margin-top: calc(-3rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-3rem * var(--equal-y-reverse))
-equal-y-16--equal-y-reverse: 0;
margin-top: calc(-4rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-4rem * var(--equal-y-reverse))
-equal-y-20--equal-y-reverse: 0;
margin-top: calc(-5rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-5rem * var(--equal-y-reverse))
-equal-y-24--equal-y-reverse: 0;
margin-top: calc(-6rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-6rem * var(--equal-y-reverse))
-equal-y-32--equal-y-reverse: 0;
margin-top: calc(-8rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-8rem * var(--equal-y-reverse))
-equal-y-40--equal-y-reverse: 0;
margin-top: calc(-10rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-10rem * var(--equal-y-reverse))
-equal-y-48--equal-y-reverse: 0;
margin-top: calc(-12rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-12rem * var(--equal-y-reverse))
-equal-y-56--equal-y-reverse: 0;
margin-top: calc(-14rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-14rem * var(--equal-y-reverse))
-equal-y-64--equal-y-reverse: 0;
margin-top: calc(-16rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-16rem * var(--equal-y-reverse))
-equal-y-72 v1.1.3--equal-y-reverse: 0;
margin-top: calc(-18rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-18rem * var(--equal-y-reverse))
-equal-y-80 v1.1.3--equal-y-reverse: 0;
margin-top: calc(-20rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-20rem * var(--equal-y-reverse))
-equal-y-88 v1.1.3--equal-y-reverse: 0;
margin-top: calc(-22rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-22rem * var(--equal-y-reverse))
-equal-y-96 v1.1.3--equal-y-reverse: 0;
margin-top: calc(-24rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-24rem * var(--equal-y-reverse))
-equal-y-104 v1.1.3--equal-y-reverse: 0;
margin-top: calc(-26rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-26rem * var(--equal-y-reverse))
-equal-y-112 v1.1.3--equal-y-reverse: 0;
margin-top: calc(-28rem * calc(1 - var(--equal-y-reverse)));
margin-bottom: calc(-28rem * var(--equal-y-reverse))
classcss
equal-x-reverse--equal-x-reverse: 1
equal-y-reverse--equal-y-reverse: 1

Usage

Set spacing in between the elements horizontally, must companion with flex utility.

123
<!-- Example -->
<y class="equal-x-2 flex">
<y>1</y>
<y>2</y>
<y>3</y>
</y>

Set spacing in between the elements vertically.

123
<!-- Example -->
<y class="equal-y-2">
<y>1</y>
<y>2</y>
<y>3</y>
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.