Skip to main content

​
Overview

Width utilities cover fixed size steps, fractions, and keyword widths in one suffix system.

​
Examples

​
Using the size scale

Use the t-shirt width scale when you want a predictable fixed content width for cards, panels, and shells.

​
Using a percentage

Use fractional width utilities when the layout itself is column-based and width should be relative to the parent.

​
Filling the available width

Use width-full when an element should stretch across the full available width of its parent.

​
Matching the viewport

Use width-screen when an element should span the full viewport width instead of just the width of its parent container.

​
Resetting the width

Use width-auto when an element should size itself to its content or when you need to remove a previously assigned width.

​
Best Practices

  • Use width-full for forms, rows, and blocks that should stretch with their parent.
  • Use width-<fraction> when the layout itself is column-based.
  • Use width-<size> for fixed shells and readable content rails.
  • Use width-screen sparingly because it ignores the document container width.

Max Width

Constrain maximum element width

Height

Control element height