# Grid-columns

The `grid-columns` style allows to define the width of the columns of the grid.

## Syntax

```sass
grid-columns: <SCALAR> . . .;
```

If there are more columns in the grid than scalars specified in `grid-columns`, they are reused cyclically.

Scalar units can be mixed.

--8<-- "docs/styles/snippets/scalar_syntax.md"

## Example

The example below shows a grid with 10 labels laid out in a grid with 2 rows and 5 columns.

We set `grid-columns: 1fr 16 2fr`.
Because there are more rows than scalars in the style rule, the scalars will be reused:

 - columns 1 and 4 have width `1fr`;
 - columns 2 and 5 have width `16`; and
 - column 3 has width `2fr`.


=== "Output"

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

=== "grid_columns.py"

    ```py
    --8<-- "docs/examples/styles/grid_columns.py"
    ```

=== "grid_columns.css"

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

## CSS

```sass
/* Set all columns to have 50% width */
grid-columns: 50%;

/* Every other column is twice as wide as the first one */
grid-columns: 1fr 2fr;
```

### Python

```py
grid.styles.grid_columns = "50%"
grid.styles.grid_columns = "1fr 2fr"
```