textual/docs/styles/width.md

Width

The width rule sets a widget's width. By default, it sets the width of the content area, but if box-sizing is set to border-box it sets the width of the border area.

Syntax

width: <SCALAR>;

Example

This example adds a widget with 50% width of the screen.

=== "width.py"

```python
--8<-- "docs/examples/styles/width.py"
```

=== "width.css"

```css
--8<-- "docs/examples/styles/width.css"
```

=== "Output"

```{.textual path="docs/examples/styles/width.py"}
```

CSS

/* Explicit cell width */
width: 10;

/* Percentage width */
width: 50%;

/* Automatic width */
width: auto

Python

self.styles.width = 10
self.styles.width = "50%
self.styles.width = "auto"