Grid auto columns

import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "grid-auto-columns"; export const description = "Utilities for controlling the size of implicitly-created grid columns.";

", "grid-auto-columns: calc(var(--spacing) * \);"], ["auto-cols-(\)", "grid-auto-columns: var(\);"], ["auto-cols-[\]", "grid-auto-columns: \;"], ]} />

Examples

Basic example

Use utilities like auto-cols-min and auto-cols-max to control the size of implicitly-created grid columns:

<!-- [!code classes:auto-cols-max] -->
<div class="grid auto-cols-max grid-flow-col">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Using a custom value

Responsive design