Width

Width utilities control how wide an element can be, how it responds to its container, and how it behaves across responsive breakpoints. FrontAlign includes fixed widths, intrinsic sizing utilities, max-width helpers, fractional widths, and responsive variants.

Quick reference

Classes	Purpose
`w-auto`, `w-full`, `w-screen`, `w-min`, `w-max`, `w-fit`	Control native width behavior, full parent width, viewport width and intrinsic content sizing.
`w-0`, `w-1` → `w-96`	Set predictable fixed widths from the FrontAlign spacing scale.
`min-w-0`, `min-w-full`	Set minimum horizontal constraints to prevent elements from collapsing below their content.
`max-w-full`, `max-w-xs`, `max-w-sm` → `max-w-7xl`	Limit horizontal growth for containers, cards, modals and readable prose columns.
`w-1fr12`, `w-1fr6`, `w-1fr5`, `w-1fr4`, `w-1fr3`, `w-1fr2`, `w-2fr3`, `w-3fr4`, `w-5fr6`, `w-11fr12`	Size an element as a percentage of its parent — based on a 12-column grid with a special 5-column variant.
`sm:`, `md:`, `lg:`, `xl:`, `2xl:`	Change width behavior from a breakpoint and above.

w-full

fills parent

w-auto

sized by content

max-w-sm

capped, won't grow past this

w-fit, content wider than container

overflows the frame

Usage

Use width utilities directly on any element.

<div class="w-auto">Auto</div>
<div class="w-full">Full</div>
<div class="w-1fr2">Half</div>
<div class="w-1fr3">One Third</div>
<div class="w-2fr3">Two Thirds</div>
<div class="w-64">Fixed 16rem</div>
<div class="w-96">Fixed 24rem</div>

Width utilities can be combined with layout utilities such as is-flex, is-grid, gap-*, and max-w-*.

Core Width

Core utilities cover common native CSS width values.

Class	Purpose
`w-auto`	Let the browser determine the width.
`w-full`	Fill the available container width.
`w-min`	Shrink to the minimum content width.
`w-max`	Expand to the maximum content width.
`w-fit`	Fit the content while respecting available space.
`w-screen`	Match the viewport width.

<div class="w-full">
  Full width
</div>

<button className="button is-primary w-fit">
  Fit content
</button>

Min and Max Width

Min and max width utilities are useful for flexible layouts, readable content, and overflow control.

Class	CSS output
`min-w-full`	`min-width: 100%`
`max-w-full`	`max-width: 100%`
`min-w-0`	`min-width: 0`

<div class="is-flex">
  <div class="min-w-0">
    This content can shrink inside a flex layout.
  </div>
</div>

min-w-0 is especially useful when text, code, or long content overflows inside Flexbox or Grid children.

Max Width Scale

Max width utilities limit how wide content can grow.

They are useful for readable text blocks, forms, modals, cards, and layout containers.

Class	CSS output
`max-w-xs`	`max-width: 20rem`
`max-w-sm`	`max-width: 24rem`
`max-w-md`	`max-width: 28rem`
`max-w-lg`	`max-width: 32rem`
`max-w-xl`	`max-width: 36rem`
`max-w-2xl`	`max-width: 42rem`
`max-w-3xl`	`max-width: 48rem`
`max-w-4xl`	`max-width: 56rem`
`max-w-5xl`	`max-width: 64rem`
`max-w-6xl`	`max-width: 72rem`
`max-w-7xl`	`max-width: 80rem`

<section class="max-w-3xl">
  <h1>Readable content width</h1>
  <p>Limit long-form content for better reading comfort.</p>
</section>

Fixed Width Scale

Fixed width utilities are useful for icons, media blocks, sidebars, small panels, thumbnails, and controlled UI elements.

Class range	Use case
`w-0` → `w-96`	Set a predictable fixed width from the spacing scale.

Class	Width	Class	Width
`w-1`	`0.25rem`	`w-8`	`2rem`
`w-2`	`0.5rem`	`w-10`	`2.5rem`
`w-3`	`0.75rem`	`w-12`	`3rem`
`w-4`	`1rem`	`w-16`	`4rem`
`w-5`	`1.25rem`	`w-24`	`6rem`
`w-6`	`1.5rem`	`w-64`	`16rem`
`w-72`	`18rem`	`w-80`	`20rem`
`w-96`	`24rem`

<div class="is-flex align-items-center gap-3">
  <div class="w-12">Icon</div>
  <div class="w-64">Panel</div>
</div>

Fractional Widths

Fractional width utilities map common layout fractions to percentages.

They are useful inside Flexbox layouts, inline grids, custom split sections, and layout compositions that do not need CSS Grid column tracks.

Class	Width	Meaning
`w-1fr12`	`8.333333%`	`1 of 12 columns`
`w-1fr6`	`16.666667%`	`1/6`
`w-1fr5`	`20%`	`1/5`
`w-1fr4`	`25%`	`1/4`
`w-1fr3`	`33.333333%`	`1/3`
`w-1fr2`	`50%`	`1/2`
`w-2fr3`	`66.666667%`	`2/3`
`w-3fr4`	`75%`	`3/4`
`w-5fr6`	`83.333333%`	`5/6`
`w-11fr12`	`91.666667%`	`11 of 12 columns`

w-1fr12

17%

w-1fr6

20%

w-1fr5

25%

w-1fr4

33%

w-1fr3

50%

w-1fr2

67%

w-2fr3

75%

w-3fr4

83%

w-5fr6

92%

w-11fr12

<div class="is-flex flex-wrap gap-3">
  <div class="w-1fr3">Sidebar</div>
  <div class="w-2fr3">Content</div>
</div>

Responsive Class Reference

Base class	Responsive variants
`w-full`	`sm:w-full`, `md:w-full`, `lg:w-full`, `xl:w-full`, `2xl:w-full`
`w-auto`	`sm:w-auto`, `md:w-auto`, `lg:w-auto`, `xl:w-auto`, `2xl:w-auto`
`w-1fr12`	`sm:w-1fr12`, `md:w-1fr12`, `lg:w-1fr12`, `xl:w-1fr12`, `2xl:w-1fr12`
`w-1fr6`	`sm:w-1fr6`, `md:w-1fr6`, `lg:w-1fr6`, `xl:w-1fr6`, `2xl:w-1fr6`
`w-1fr5`	`sm:w-1fr5`, `md:w-1fr5`, `lg:w-1fr5`, `xl:w-1fr5`, `2xl:w-1fr5`
`w-1fr4`	`sm:w-1fr4`, `md:w-1fr4`, `lg:w-1fr4`, `xl:w-1fr4`, `2xl:w-1fr4`
`w-1fr3`	`sm:w-1fr3`, `md:w-1fr3`, `lg:w-1fr3`, `xl:w-1fr3`, `2xl:w-1fr3`
`w-1fr2`	`sm:w-1fr2`, `md:w-1fr2`, `lg:w-1fr2`, `xl:w-1fr2`, `2xl:w-1fr2`
`w-2fr3`	`sm:w-2fr3`, `md:w-2fr3`, `lg:w-2fr3`, `xl:w-2fr3`, `2xl:w-2fr3`
`w-3fr4`	`sm:w-3fr4`, `md:w-3fr4`, `lg:w-3fr4`, `xl:w-3fr4`, `2xl:w-3fr4`
`w-5fr6`	`sm:w-5fr6`, `md:w-5fr6`, `lg:w-5fr6`, `xl:w-5fr6`, `2xl:w-5fr6`
`w-11fr12`	`sm:w-11fr12`, `md:w-11fr12`, `lg:w-11fr12`, `xl:w-11fr12`, `2xl:w-11fr12`

Notes

Use w-full when an element should fill its parent.
Use max-w-* to limit readable content and large surfaces.
Use min-w-0 to fix overflow inside Flexbox and Grid children.
Use fractional width utilities for Flexbox-based split layouts.
Use Grid column utilities when you need a full two-dimensional column system.
Responsive width variants follow FrontAlign's mobile-first breakpoint system.