> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sizing

> Width, height, and matching min/max sizing helpers for fixed, fractional, and keyword-based layouts.

<div className="sk-theme-hero not-prose">
  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintcdn.com/skelementor/4oZ9ucvfw4_Z4_Bt/images-for-overview/Sizing.png?fit=max&auto=format&n=4oZ9ucvfw4_Z4_Bt&q=85&s=e2064b656c338db4063670b0c4d5ef04" className="dark:hidden block" alt="Sizing overview cover" width="4054" height="2489" data-path="images-for-overview/Sizing.png" />

  <img style={{ borderRadius: "0.5rem", width: "100%", height: "auto" }} src="https://mintlify.s3.us-west-1.amazonaws.com/skelementor/images-for-overview/Sizing%20-%20Dark.png" className="hidden dark:block" alt="Sizing overview cover (dark)" />
</div>

## Overview

Sizing utilities cover width, height, and matching min/max constraints with the same suffix families.

<CardGroup cols={2}>
  <Card title="Width" icon="arrows-left-right" href="/sizing/width">
    Container, fraction, full, auto, and screen width utilities
  </Card>

  <Card title="Height" icon="arrows-up-down" href="/sizing/height">
    Container, fraction, full, auto, and screen height utilities
  </Card>

  <Card title="Max Width" icon="arrows-left-right-to-line" href="/sizing/max-width">
    Matching width-cap utilities
  </Card>

  <Card title="Min Width" icon="arrow-left-to-line" href="/sizing/min-width">
    Matching width-floor utilities
  </Card>

  <Card title="Max Height" icon="arrow-up-right-and-arrow-down-left-from-center" href="/sizing/max-height">
    Matching height-cap utilities
  </Card>

  <Card title="Min Height" icon="arrow-down-left-and-arrow-up-right-to-center" href="/sizing/min-height">
    Matching height-floor utilities
  </Card>
</CardGroup>

## Core Families

* Width: `width-<size>`, `width-<fraction>`, and keyword helpers like `width-full`, `width-auto`, and `width-screen`
* Min width: `minimum-width-<size>`, `minimum-width-<fraction>`, and keyword floor helpers like `minimum-width-full`, `minimum-width-auto`, and `minimum-width-screen`
* Max width: `maximum-width-<size>`, `maximum-width-<fraction>`, and keyword cap helpers like `maximum-width-full`, `maximum-width-auto`, and `maximum-width-screen`
* Height: `height-<size>`, `height-<fraction>`, and keyword helpers like `height-full`, `height-auto`, and `height-screen`
* Min height: `minimum-height-<size>`, `minimum-height-<fraction>`, and keyword floor helpers like `minimum-height-full`, `minimum-height-auto`, and `minimum-height-screen`
* Max height: `maximum-height-<size>`, `maximum-height-<fraction>`, and keyword cap helpers like `maximum-height-full`, `maximum-height-auto`, and `maximum-height-screen`

## Related Utilities

<CardGroup cols={2}>
  <Card title="Layout" icon="grid" href="/concepts/layout">
    Display utilities for sizing
  </Card>

  <Card title="Spacing" icon="arrows-to-line" href="/concepts/spacing">
    Margin and padding utilities
  </Card>
</CardGroup>
