Spacing & Visibility

Margin, padding, and visibility utilities. Included in @grundtone/design-system CSS — see Installation for setup.

All utilities support responsive prefixes: sm:, md:, lg:, xl:, 2xl:.

---

How it works

Spacing utilities follow the pattern .{property}{direction}-{size}:

• Property: m (margin) or p (padding)
• Direction: blank (all), x (inline), y (block), t (top), b (bottom), s (start), e (end)
• Size: 0–24 from the spacing scale

Inline directions (x, s, e) use CSS logical properties for automatic RTL support.

---

Margin

All sides

<div style="background: var(--vp-c-bg-alt); border-radius: 6px; padding: 2px;">
  <div class="m-4 p-3 align-text-center" style="background: var(--vp-c-brand-soft); border-radius: 4px;">
    .m-4 &mdash; 1rem margin on all sides
  </div>
</div>

.m-4 — 1rem margin on all sides

Directional margin

Use t/b for top/bottom, s/e for inline-start/end (RTL-aware):

<div class="flex flex-col gap-1">
  <div style="background: var(--vp-c-bg-alt); border-radius: 6px; padding: 2px;">
    <div class="ms-8 px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">
      .ms-8 &mdash; margin-inline-start: 2rem (left in LTR)
    </div>
  </div>
  <div style="background: var(--vp-c-bg-alt); border-radius: 6px; padding: 2px;">
    <div class="me-8 px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px; text-align: right;">
      .me-8 &mdash; margin-inline-end: 2rem (right in LTR)
    </div>
  </div>
  <div style="background: var(--vp-c-bg-alt); border-radius: 6px; padding: 2px;">
    <div class="mt-6 px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">
      .mt-6 &mdash; margin-top: 1.5rem
    </div>
  </div>
</div>

.ms-8 — margin-inline-start: 2rem (left in LTR)

.me-8 — margin-inline-end: 2rem (right in LTR)

.mt-6 — margin-top: 1.5rem

Abbreviation	CSS property	Description
.m-{n}	margin	All sides
.mx-{n}	margin-inline	Left + right (RTL-aware)
.my-{n}	margin-block	Top + bottom
.mt-{n}	margin-top	Top only
.mb-{n}	margin-bottom	Bottom only
.ms-{n}	margin-inline-start	Start (left in LTR, right RTL)
.me-{n}	margin-inline-end	End (right in LTR, left in RTL)

---

Auto margins

Centering with mx-auto

Center a block element horizontally:

<div class="p-3" style="background: var(--vp-c-bg-alt); border-radius: 6px;">
  <div class="mx-auto p-3 align-text-center" style="max-width: 280px; background: var(--vp-c-brand-soft); border-radius: 4px;">
    .mx-auto &mdash; centered with auto inline margins
  </div>
</div>

.mx-auto — centered with auto inline margins

Pushing with mt-auto

Push an element to the bottom of a flex container:

<div class="flex flex-col p-3" style="min-height: 160px; background: var(--vp-c-bg-alt); border-radius: 6px;">
  <div class="px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">
    Header
  </div>
  <div class="mt-auto px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">
    Footer &mdash; .mt-auto pushes to bottom
  </div>
</div>

Header

Footer — .mt-auto pushes to bottom

Class	CSS	Common use
.mx-auto	margin-inline: auto	Center block elements
.ms-auto	margin-inline-start: auto	Push to end in flex row
.me-auto	margin-inline-end: auto	Push to start in flex row
.mt-auto	margin-top: auto	Push to bottom in flex column
.mb-auto	margin-bottom: auto	Push to top in flex column
.m-auto	margin: auto	Center in both axes (with width)

---

Padding

All sides

<div style="background: var(--vp-c-bg-alt); border-radius: 6px;">
  <div class="p-8" style="background: var(--vp-c-brand-soft); border-radius: 6px;">
    <div class="px-3 py-2 align-text-center" style="background: var(--vp-c-bg); border-radius: 4px;">
      .p-8 &mdash; 2rem padding on all sides
    </div>
  </div>
</div>

.p-8 — 2rem padding on all sides

Axis padding

Use px for horizontal (inline) and py for vertical (block):

<div class="flex flex-col gap-2">
  <div class="px-12" style="background: var(--vp-c-brand-soft); border-radius: 6px;">
    <div class="px-3 py-2 align-text-center" style="background: var(--vp-c-bg); border-radius: 4px;">
      .px-12 &mdash; padding-inline: 3rem
    </div>
  </div>
  <div class="py-6" style="background: var(--vp-c-brand-soft); border-radius: 6px;">
    <div class="px-3 py-2 align-text-center" style="background: var(--vp-c-bg); border-radius: 4px;">
      .py-6 &mdash; padding-block: 1.5rem
    </div>
  </div>
</div>

.px-12 — padding-inline: 3rem

.py-6 — padding-block: 1.5rem

Abbreviation	CSS property	Description
.p-{n}	padding	All sides
.px-{n}	padding-inline	Left + right (RTL-aware)
.py-{n}	padding-block	Top + bottom
.pt-{n}	padding-top	Top only
.pb-{n}	padding-bottom	Bottom only
.ps-{n}	padding-inline-start	Start (left in LTR, right RTL)
.pe-{n}	padding-inline-end	End (right in LTR, left in RTL)

---

Responsive spacing

Add a breakpoint prefix to change spacing at different viewports:

<div class="p-2 md:p-6 lg:p-10" style="background: var(--vp-c-brand-soft); border-radius: 6px;">
  <div class="p-3 align-text-center" style="background: var(--vp-c-bg); border-radius: 4px;">
    .p-2 md:p-6 lg:p-10 &mdash; padding grows with viewport
  </div>
</div>

.p-2 md:p-6 lg:p-10 — padding grows with viewport

<!-- Tight on mobile, spacious on desktop -->
<section class="p-2 md:p-6 lg:p-10">...</section>

<!-- No margin on mobile, auto-center from md -->
<div class="mx-0 md:mx-auto" style="max-width: 600px">...</div>

<!-- Stack tight, then add vertical spacing on desktop -->
<div class="my-2 lg:my-8">...</div>

---

Composing spacing

Combine multiple spacing classes on one element:

<div class="flex flex-col gap-2 p-3" style="background: var(--vp-c-bg-alt); border-radius: 6px;">
  <div class="px-4 py-2 align-text-center" style="background: var(--vp-c-brand-soft); border-radius: 4px;">
    .px-4 .py-2 &mdash; different horizontal and vertical padding
  </div>
  <div class="ps-8 pe-2 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">
    .ps-8 .pe-2 &mdash; more start padding, less end padding
  </div>
  <div class="ms-auto me-4 px-4 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">
    .ms-auto .me-4 &mdash; pushed right with end margin
  </div>
</div>

.px-4 .py-2 — different horizontal and vertical padding

.ps-8 .pe-2 — more start padding, less end padding

.ms-auto .me-4 — pushed right with end margin

<!-- Different horizontal and vertical padding -->
<div class="px-4 py-2">...</div>

<!-- Asymmetric inline padding -->
<div class="ps-8 pe-2">...</div>

<!-- Push right with auto + fixed margin -->
<div class="ms-auto me-4">...</div>

---

Spacing scale

The scale matches the gap utilities for consistency. Values use rem (relative to root font size):

Suffix	Value	px	Suffix	Value	px
0	0	0	5	1.25rem	20
px	1px	1	6	1.5rem	24
0-5	0.125rem	2	7	1.75rem	28
1	0.25rem	4	8	2rem	32
1-5	0.375rem	6	9	2.25rem	36
2	0.5rem	8	10	2.5rem	40
2-5	0.625rem	10	11	2.75rem	44
3	0.75rem	12	12	3rem	48
3-5	0.875rem	14	14	3.5rem	56
4	1rem	16	16	4rem	64
			20	5rem	80
			24	6rem	96

---

Visibility

Control element visibility without removing it from the layout.

invisible vs hidden

.invisible hides the element but keeps its space. .hidden removes it from the layout entirely:

<div class="flex flex-col gap-2">
  <div class="flex gap-4 p-3" style="background: var(--vp-c-bg-alt); border-radius: 6px;">
    <div class="px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">A</div>
    <div class="invisible px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">B (.invisible)</div>
    <div class="px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">C &mdash; gap preserved</div>
  </div>
  <div class="flex gap-4 p-3" style="background: var(--vp-c-bg-alt); border-radius: 6px;">
    <div class="px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">A</div>
    <div class="hidden px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">B (.hidden)</div>
    <div class="px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">C &mdash; B removed from layout</div>
  </div>
</div>

A

B (.invisible)

C — gap preserved

A

B (.hidden)

C — B removed from layout

<div class="flex gap-4 p-3" style="background: var(--vp-c-bg-alt); border-radius: 6px;">
  <div class="px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">Visible</div>
  <div class="invisible px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">Invisible (space kept)</div>
  <div class="px-3 py-2" style="background: var(--vp-c-brand-soft); border-radius: 4px;">Visible</div>
</div>

Visible

Invisible (space kept)

Visible

Class	CSS	Layout space
.visible	visibility: visible	Kept
.invisible	visibility: hidden	Kept
.hidden	display: none	Removed

When to use which: Use .invisible for skeleton loading states, fade transitions, or keeping layout stable. Use .hidden when the element should not affect layout at all.

---

Comparison with Bootstrap

Feature	Bootstrap 5	Grundtone
Naming	.mt-md-3 (infix)	.md:mt-3 (prefix)
!important	On every utility	None
Scale	0–5 (6 values)	0–24 (25 values)
RTL support	.ms-* / .me-*	Same + px/mx use margin-inline
Logical properties	Only start/end	All inline directions
Visibility	.visible / .invisible	Same, plus responsive variants
Responsive	.mt-md-3	.md:mt-3