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

# Width

> Control width with size, fraction, and keyword width utilities.

export const WidthScreenDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">width-screen</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-viewport">
            <div className="sk-demo-w-screen sk-size-keyword-bar">
              width-screen
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const WidthFullDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">width-full</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent">
            <div className="sk-size-keyword-bar sk-size-keyword-bar--fill">
              width-full
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const WidthAutoDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">width-auto</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent">
            <div className="sk-size-keyword-bar sk-size-keyword-bar--inline" style={{
    width: "auto"
  }}>
              width-auto
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const WidthFractionalDemo = () => {
  const cell = bg => ({
    borderRadius: "0.5rem",
    padding: "0.5rem 0.35rem",
    fontSize: "0.7rem",
    fontWeight: 700,
    color: "#ffffff",
    textAlign: "center",
    boxShadow: "0 4px 12px rgba(15, 23, 42, 0.15)",
    background: bg,
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap"
  });
  const row = (label, children) => <div key={label} className="space-y-2">
      <span className="tw-label">{label}</span>
      <div className="tw-demo-card" style={{
    padding: "0.5rem"
  }}>
        <div style={{
    display: "flex",
    gap: "0.35rem",
    width: "100%"
  }}>{children}</div>
      </div>
    </div>;
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-5">
        {row(".width-1-2 + .width-1-2", [<div key="a" style={{
    ...cell("#2563eb"),
    width: "50%"
  }}>
            50%
          </div>, <div key="b" style={{
    ...cell("#0d9488"),
    width: "50%"
  }}>
            50%
          </div>])}
        {row(".width-1-3 + .width-2-3", [<div key="a" style={{
    ...cell("#7c3aed"),
    width: "33.333%"
  }}>
            ⅓
          </div>, <div key="b" style={{
    ...cell("#db2777"),
    width: "66.666%"
  }}>
            ⅔
          </div>])}
        {row(".width-1-4 + .width-3-4", [<div key="a" style={{
    ...cell("#ca8a04"),
    width: "25%"
  }}>
            ¼
          </div>, <div key="b" style={{
    ...cell("#0891b2"),
    width: "75%"
  }}>
            ¾
          </div>])}
      </div>
    </div>;
};

export const WidthDemo = () => {
  const widths = [{
    cls: "width-3xs",
    rem: 16,
    label: "16rem / 256px"
  }, {
    cls: "width-sm",
    rem: 24,
    label: "24rem / 384px"
  }, {
    cls: "width-xl",
    rem: 36,
    label: "36rem / 576px"
  }, {
    cls: "width-4xl",
    rem: 56,
    label: "56rem / 896px"
  }, {
    cls: "width-7xl",
    rem: 80,
    label: "80rem / 1280px"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo space-y-3" style={{
    paddingTop: "1.5rem",
    paddingBottom: "1.5rem"
  }}>
        {widths.map(w => <div key={w.cls} className="flex items-center gap-3">
            <span style={{
    width: "3rem",
    textAlign: "right",
    fontFamily: "monospace",
    fontSize: "0.7rem",
    color: "var(--demo-fg-subtle)",
    flexShrink: 0
  }}>{w.cls}</span>
            <div style={{
    width: `${w.rem / 80 * 100}%`
  }} className="rounded-md bg-sky-500 p-1.5 text-center text-xs font-bold text-white shadow-lg">
              {w.label}
            </div>
          </div>)}
      </div>
    </div>;
};

## Overview

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

| Pattern            | Supported values                                                                     |
| ------------------ | ------------------------------------------------------------------------------------ |
| `width-<size>`     | `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl` |
| `width-<fraction>` | `1-2`, `1-3`, `2-3`, `1-4`, `3-4`                                                    |
| `width-<value>`    | `px`, `auto`, `full`, `screen`                                                       |

## Examples

### Using the size scale

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

<WidthDemo />

```html theme={null}
<div class="elementor-element width-full">
  <div class="width-xl padding-3 background-primary text-white rounded text-center text-sm font-bold">
    width-xl
  </div>
</div>
```

| Pattern        | Supported classes                                                                                                                                                  | What it controls                      |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- |
| `width-<size>` | `width-3xs`, `width-2xs`, `width-xs`, `width-sm`, `width-md`, `width-lg`, `width-xl`, `width-2xl`, `width-3xl`, `width-4xl`, `width-5xl`, `width-6xl`, `width-7xl` | Fixed widths based on the size ladder |

### Using a percentage

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

<WidthFractionalDemo />

```html theme={null}
<div class="elementor-element flex gap-2 width-full">
  <div class="width-1-3 padding-3 background-primary text-white rounded text-center text-sm font-bold">
    width-1-3
  </div>
  <div class="width-2-3 padding-3 background-secondary text-black rounded text-center text-sm font-bold">
    width-2-3
  </div>
</div>
```

| Pattern            | Supported classes                                               | What it controls                    |
| ------------------ | --------------------------------------------------------------- | ----------------------------------- |
| `width-<fraction>` | `width-1-2`, `width-1-3`, `width-2-3`, `width-1-4`, `width-3-4` | Width as a percentage of the parent |

### Filling the available width

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

<WidthFullDemo />

```html theme={null}
<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="width-full padding-3 background-success text-white rounded text-center text-sm font-bold">
    width-full
  </div>
</div>
```

| Pattern      | Supported classes | What it controls                 |
| ------------ | ----------------- | -------------------------------- |
| `width-full` | `width-full`      | Fills the available parent width |

### Matching the viewport

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

<WidthScreenDemo />

```html theme={null}
<div class="elementor-element overflow-hidden rounded-lg">
  <div class="width-screen padding-3 background-primary text-white text-center text-sm font-bold">
    width-screen
  </div>
</div>
```

| Pattern        | Supported classes | What it controls           |
| -------------- | ----------------- | -------------------------- |
| `width-screen` | `width-screen`    | Matches the viewport width |

### 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.

<WidthAutoDemo />

```html theme={null}
<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="width-auto inline-block padding-3 background-primary text-white rounded text-center text-sm font-bold">
    width-auto
  </div>
</div>
```

| Pattern      | Supported classes | What it controls                               |
| ------------ | ----------------- | ---------------------------------------------- |
| `width-auto` | `width-auto`      | Sizes to content or surrounding layout context |

## 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.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Max Width" icon="arrows-left-right-to-line" href="/sizing/max-width">
    Constrain maximum element width
  </Card>

  <Card title="Height" icon="arrows-up-down" href="/sizing/height">
    Control element height
  </Card>
</CardGroup>