Axis Twelve Spacing

Build faster, center easier. The 12-column solution.

Spacing Scale

Named Sizes

Name Value Padding Class Margin Class Gap Class
xs 0.25rem (4px) .p-xs .m-xs .gap-xs
sm 0.5rem (8px) .p-sm .m-sm .gap-sm
md 1rem (16px) .p-md .m-md .gap-md
lg 1.5rem (24px) .p-lg .m-lg .gap-lg
xl 2rem (32px) .p-xl .m-xl .gap-xl
2xl 3rem (48px) .p-2xl .m-2xl .gap-2xl
3xl 4rem (64px) .p-3xl .m-3xl .gap-3xl

Padding (Internal Spacing)

Padding All Sides

p-xs (4px)
p-sm (8px)
p-md (16px)
p-lg (24px)

Padding Specific Sides

.pt-[size] - Top, .pb-[size] - Bottom, .pl-[size] - Left, .pr-[size] - Right

Vertical Padding (Top & Bottom)
Horizontal Padding (Left & Right)

Padding Directions

.pv-[size] - Vertical, .ph-[size] - Horizontal

Vertical: pv-md
Horizontal: ph-md
<div class="p-md">Padded on all sides</div> <div class="pt-lg pb-lg">Vertical padding</div> <div class="ph-lg">Horizontal padding</div>

Margin (External Spacing)

Margin All Sides

m-sm (8px)
m-md (16px)
m-lg (24px)

Margin Specific Sides

.mt-[size] - Top, .mb-[size] - Bottom, .ml-[size] - Left, .mr-[size] - Right

mb-md (16px bottom margin)
ml-md (16px left margin)

Margin Directions

.mv-[size] - Vertical, .mh-[size] - Horizontal, .mx-auto - Center horizontally

mx-auto (Centered)
<div class="m-md">Margin on all sides</div> <div class="mb-md">Bottom margin</div> <div class="mx-auto">Centered with auto margin</div>

Combined Spacing

Padding + Margin Together

p-md + m-sm (Padding inside, Margin outside)

Form Field Spacing

<form class="p-md"> <div class="mb-md"> <label class="block mb-sm">Label</label> <input type="text" class="mt-sm"> </div> </form>

Numeric Spacing Scale (0-96)

Numeric Padding

Use .p-0, .p-1, .p-2, .p-3, etc. up to .p-96

p-1
p-2
p-md
p-8

Numeric Margin

Use .m-0, .m-1, .m-2, .m-3, etc. up to .m-96

m-2
m-md
m-lg
<div class="p-sm">Padding: 0.5rem</div> <div class="p-md">Padding: 1rem</div> <div class="p-8">Padding: 2rem</div>

Responsive Spacing

Responsive Padding

Different padding at different breakpoints

Using numeric spacing scale:
Available sizes: 0-9 (or xs, sm, md, lg, xl, 2xl, 3xl)

Responsive Columns with Spacing

Columns that respond to breakpoints with spacing

Mobile: Full | Tablet: 1/2 | Desktop: 1/4
Spacing applied to all
m-sm (margin) + p-md (padding)
Responsive grid layout
<div class="col-12 col-md-6 col-lg-3"> <div class="m-sm p-md"> Responsive column </div> </div>

Practical Example: Card Layout

Card with Spacing

Card Header

Card Title

Card description goes here with proper spacing.

Card Header

Card Title

Card description goes here with proper spacing.

Card Header

Card Title

Card description goes here with proper spacing.