# grid-auto-columns
> Applies `grid-auto-columns` to the *implicit* columns a grid creates past its explicit tracks.
```ts
import { gridAutoColumns } from "@sdxc/u/layout";
```
Applies `grid-auto-columns` to the *implicit* columns a grid creates past
its explicit tracks. A number resolves on the spacing scale, `"full"` to
`100%`; raw strings such as `minmax(...)` reach CSS verbatim.
## Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
| --- | --- |
| `u.gridAutoColumns(40)` | `css({ gridAutoColumns: "calc(var(--ui-spacing, 0.25rem) * 40)" })` |
| `u.gridAutoColumns("minmax(10rem, 1fr)")` | `css({ gridAutoColumns: "minmax(10rem, 1fr)" })` |
| `u.gridAutoColumns("max-content")` | `css({ gridAutoColumns: "max-content" })` |
## Examples
### Basic example
Use `gridAutoColumns(n)` to size the columns a grid creates on its own, here one per item with `gridAutoFlow("column")`:
```tsx
01
02
03
```
### Sharing the width
Pass a track size like `gridAutoColumns("minmax(0, 1fr)")` to make every implicit column an equal share of the grid's width:
```tsx
01
02
03
04
```
### Sizing to content
Use `gridAutoColumns("max-content")` to make each implicit column as wide as its content:
```tsx
```
## Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
```ts
u.gridAutoColumns("2.75rem")
```
## Applying on a state
Wrap the call in a state utility to scope it to one selector.
```ts
u.hover(u.gridAutoColumns(40))
```
## Responsive design
Wrap the call in a container query to scope it to one width.
```ts
u.at("md", u.gridAutoColumns(40))
```
## Customizing your theme
### Customizing spacing
Every numeric step multiplies `--ui-spacing`, so redefining it rescales every spacing and sizing utility at once:
```css
:root {
--ui-spacing: 0.25rem;
}
```
Every call that names the step now reads the new value:
```ts
gridAutoColumns(4)
```
## Signature
```ts
u.gridAutoColumns(value: SizeValue)
```