max-width
Limits the maximum width of an element. A core property for container centering, responsive layouts, and content readability. Use maxw + unit combination.
Class List
| Class | CSS | Description |
|---|---|---|
maxw{N}px | max-width: {N}px | pixel-based max-width (under 20px) |
maxw{N}rem | max-width: {N}rem | rem-based max-width (20px and above, 1rem=10px) |
maxw{N}p | max-width: {N}% | percentage-based max-width |
maxwa | max-width: auto | reset to browser default |
maxwn | max-width: none | remove max-width limit |
maxwfc | max-width: fit-content | fit-content size (does not exceed parent) |
maxwminc | max-width: min-content | minimum size based on longest word |
maxwmaxc | max-width: max-content | single-line size without wrapping |
Core Pattern: Center Container
The most commonly used pattern in Atomic CSS. maxw120rem mxa px2rem creates a centered container with a max width of 1200px.
<!-- Most common center container -->
<div class="maxw120rem mxa px2rem">
<!-- max-width: 1200px, margin: 0 auto, padding: 0 20px -->
<h1>Page Title</h1>
<p>Content stays center-aligned without exceeding 1200px</p>
</div>
<!-- Narrow content area (blog, docs) -->
<article class="maxw72rem mxa px2rem">
<!-- max-width: 720px, Suitable for body text readability -->
<h1>Article title</h1>
<p>Comfortable width for about 60-80 characters per line</p>
</article>
<!-- Wide container (dashboard) -->
<div class="maxw160rem mxa px2rem">
<!-- max-width: 1600px -->
<div class="dg gtcr4-1fr gap2rem">...</div>
</div>Center container visualization
The outer area spans the full screen; the purple area is constrained by max-width and centered
| Class Combination | Description |
|---|---|
maxw120rem mxa px2rem | 1200px center container (most common) |
maxw72rem mxa px2rem | 720px text area (blog, documentation) |
maxw96rem mxa px2rem | 960px medium container |
maxw160rem mxa px2rem | 1600px wide container (dashboard) |
maxw40rem mxa | 400px narrow area (login form, modal) |
Responsive Container
Combine with media query prefixes to apply different max-width values depending on screen size.
<!-- Responsive max-width transition -->
<div class="maxw120rem md-maxw96rem sm-maxw100p mxa px2rem">
Default 1200px → Tablet 960px → Mobile 100%
</div>
<!-- Remove limit on mobile -->
<div class="maxw80rem sm-maxwn mxa px2rem">
Default 800px, no limit on mobile
</div>
<!-- Image responsive limit -->
<img class="maxw100p ha db" src="hero.jpg" alt="Responsive Image" />| Class Combination | Behavior |
|---|---|
maxw120rem md-maxw96rem | default 1200px, 960px below 1024px |
maxw80rem sm-maxwn | default 800px, no limit below 768px |
maxw100p | does not exceed parent 100% width (essential for images) |
maxw120rem sm-maxw100p | default 1200px, 100% on mobile |
Content-Based Sizing
Keyword classes that determine max-width based on content instead of fixed values.
fit-content — maxwfc
Fits content size without exceeding parent width
min-content — maxwminc
Constrained to the width of the longest word
max-content — maxwmaxc
Width that fits all content in a single line without wrapping
<!-- fit-content: Fits to content size -->
<div class="maxwfc bg18181B p16px br8px">
This box fits the text length
</div>
<!-- min-content: Based on longest word -->
<div class="maxwminc bg18181B p16px br8px">
Long sentence but wraps at word boundaries
</div>
<!-- max-content: Full display without wrapping -->
<div class="maxwmaxc bg18181B p16px br8px">
This text is displayed in a single line without wrapping
</div>
<!-- none: Remove limit -->
<div class="maxwn bg18181B p16px br8px">
No max-width limit
</div>Visual Comparison
Compares how various max-width values affect an element.
max-width: 200px — maxw200px
element width does not exceed 200px
max-width: 50rem (500px) — maxw50rem
allows up to 500px based on 1rem = 10px
max-width: 100% — maxw100p
does not exceed parent width; essential for images
max-width: fit-content — maxwfc
width determined by content size
max-width: none — maxwn
max-width limit fully removed
Tips & Notes
maxw + mxa = center layout
maxw120rem mxa px2rem is the most universal center container pattern. It limits the max width, sets left/right margins to auto, and ensures side padding on mobile.
Auto-sized elements with maxwfc
maxwfc is useful for elements that should auto-size to their content, such as buttons, tags, and badges.
Remove limit with maxwn
When max-width is set by a parent or global style, use maxwn to remove the limit. The sm-maxwn pattern is commonly used for full width on mobile.
Text width limit for readability
Body text is optimal at 60-80 characters per line. Limiting the text area's max width to around maxw72rem (720px) improves readability.