Dimensions and length units
Site Designer accepts any valid CSS length unit in dimension fields. Choosing the right unit is not just a technical detail — it determines whether your layout stays fixed, scales proportionally, or adapts responsively to different screens and user preferences.
px — fixed pixels
Pixels are the most intuitive unit: width: 300px is always 300 pixels wide, regardless of screen size, font size, or parent element.
Use px for: borders (1px), box shadows, minimum widths, and precise visual details that should never scale.
Avoid px for: font sizes and major layout dimensions — they do not adapt to user preferences or viewport size.
% — percentage of parent
A percentage is relative to the parent element’s corresponding dimension. width: 50% means half the parent’s width. padding-top: 100% means padding equal to the parent’s width — a classic trick for maintaining aspect ratios.
Use % for: fluid column widths, relative padding, and elements that should shrink and grow with their container.
em — relative to current font size
1em equals the computed font size of the current element. If an element has font-size: 20px, then padding: 1em equals 20 px of padding.
The catch: em compounds in nested elements. If a parent is 1.2em and a child is 1.2em, the child’s actual size is 1.44em (1.2 × 1.2) relative to the root. This can produce unexpected results deep in a component tree.
Use em for: spacing and sizing that should scale proportionally with the component’s own font size — icon sizes, button padding, and component-internal spacing.
rem — relative to root font size
1rem always refers to the root element’s (<html>) font size, which defaults to 16 px in all major browsers. Unlike em, rem does not compound.
Use rem for: font sizes, major spacing values, and any dimension where you want consistent scaling across components without compounding.
vw and vh — viewport units
1vw equals 1% of the viewport width. 1vh equals 1% of the viewport height.
Use vw/vh for: full-screen hero sections (height: 100vh), fluid headline sizes (font-size: 5vw), and elements that should always fill or relate to the visible screen area.
One caution: 100vh on mobile includes the browser’s address bar in some browsers. Use 100dvh (dynamic viewport height) for mobile-safe full-screen sections when available.
fr — fraction units in CSS Grid
fr is a CSS Grid-specific unit. 1fr means “one fraction of the available space.” A grid with grid-template-columns: 1fr 2fr 1fr gives three columns where the middle one gets twice as much space as the others.
Use fr for: CSS Grid column and row definitions. It is not valid in other contexts.
ch — character width
1ch equals the width of the 0 character in the current font. This makes ch perfect for controlling text container width in terms of characters rather than pixels.
max-width: 72ch on a text container gives you roughly 72 characters per line — the classic typographic sweet spot for body text readability.
auto — browser-calculated
auto tells the browser to calculate the value. For width, it means “fill available space.” For margin: auto with a defined width, it centers the element horizontally. For height, it means “size to content.”
Use auto for: centered block elements, natural content heights, and whenever you want the browser to do the math.
min-content and max-content
min-content sizes an element to the narrowest it can be without overflowing its content. max-content sizes it to the widest its content needs, ignoring the container.
These are especially useful in Grid and Flexbox: grid-template-columns: max-content 1fr creates a first column exactly as wide as its content, with the second column filling the rest.
clamp() for fluid sizing
clamp(minimum, preferred, maximum) lets you define a value that scales fluidly between a floor and a ceiling:
width: clamp(300px, 50%, 800px);
font-size: clamp(1rem, 2.5vw, 1.5rem);
This replaces many media-query breakpoints with a single declaration. The preferred value (middle argument) is typically a viewport-relative unit that scales smoothly.
