# Width

> Utilities for controlling the width of an element.

Source: https://www.zenplates.co/documentation/utilities/width (Utilities › Sizing)

Utilities for setting the width of an element

| Class       | Properties       |
| ----------- | ---------------- |
| `.w-px`     | `width: 1px;`    |
| `.w-0`      | `width: 0;`      |
| `.w-1`      | `width: .25rem;` |
| `.w-2`      | `width: .5rem;`  |
| `.w-3`      | `width: .75rem;` |
| `.w-4`      | `width: 1rem;`   |
| `.w-5`      | `width: 1.5rem;` |
| `.w-6`      | `width: 2rem;`   |
| `.w-7`      | `width: 3rem;`   |
| `.w-8`      | `width: 4rem;`   |
| `.w-9`      | `width: 6rem;`   |
| `.w-auto`   | `width: auto;`   |
| `.w-full`   | `width: 100%;`   |
| `.w-screen` | `width: 100vw;`  |

## Usage

### Fixed width

Use `.w-{number|px}` to apply a fixed width to an element.

```html
<div class="w-px ..."></div>
<div class="w-1 ..."></div>
<div class="w-2 ..."></div>
<div class="w-3 ..."></div>
<div class="w-4 ..."></div>
<div class="w-5 ..."></div>
<div class="w-6 ..."></div>
<div class="w-7 ..."></div>
<div class="w-8 ..."></div>
```

Use `.w-0` to set the width of an element to 0px.

### Fluid width

Use `.w-full` to set an element to the full width of the container.

```html
<div class="inline-block w-full ...">
  .inline-block.w-full
</div>
```

### Auto

Use `.w-auto` to let the browser calculate and set the width for the element.

```html
<div class="block w-auto">
  .block.w-auto
</div>
<div class="inline-block w-auto ...">
  .inline-block.w-auto
</div>
```

### Screen width

Use `.w-screen` to make an element span the width of the viewport.

## Variants

By default, only responsive variants are generated for width utilities.

### Responsive

To control the width of an element at a specific breakpoint, add a `{screen}:` prefix to any existing width utility.

For example, use `.md:w-4` to apply the `w-4` utility at only medium screen sizes and above.

### Hover-state

To include hover-state variants like `.hover:w-4`, add `"width"` to the `$hover-variants` variable when [recompiling your CSS](https://www.zenplates.co/documentation/customization/using-sass-source-files):

```scss
$hover-variants: (
  // ...
  "width",
);
```