Sizing Utilities

Width and height utilities for element sizing.

Width & Height Classes

<!-- Width percentages -->
<div class="antsand-w-25">Width 25%</div>
<div class="antsand-w-50">Width 50%</div>
<div class="antsand-w-75">Width 75%</div>
<div class="antsand-w-100">Width 100%</div>

<!-- Width auto -->
<div class="antsand-w-auto">Width auto</div>

<!-- Height -->
<div class="antsand-h-100">Height 100%</div>

<!-- Min/Max width -->
<div class="antsand-min-w-0">Min width 0</div>
<div class="antsand-max-w-full">Max width 100%</div>

Max-Width Container Classes

Responsive max-width utilities for constraining content width and centering.

<!-- Breakpoint-based max-widths -->
<div class="antsand-max-w-sm">Max width 640px (small)</div>
<div class="antsand-max-w-md">Max width 768px (medium)</div>
<div class="antsand-max-w-lg">Max width 1024px (large)</div>
<div class="antsand-max-w-xl">Max width 1280px (extra large)</div>

<!-- Reading/content widths -->
<div class="antsand-max-w-prose">Max width 700px (optimal reading width)</div>

<!-- Utility max-widths -->
<div class="antsand-max-w-full">Max width 100%</div>
<div class="antsand-max-w-none">No max width constraint</div>

<!-- Center content with auto margins -->
<div class="antsand-max-w-lg antsand-mx-auto">
    Centered content with max-width 1024px
</div>

Note: No !important

All ANTSAND v2 utilities follow proper CSS cascade without using !important. If you need to override a style, use more specific selectors or remove conflicting classes rather than fighting specificity. See the CSS Specificity Philosophy for details.