# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/grid-template-columns.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { Stripes } from "@/components/stripes.tsx";

export const title = "grid-template-columns";
export const description = "Utilities for specifying the columns in a grid layout.";

<ApiTable
  rows={[
    ["grid-cols-<number>", "grid-template-columns: repeat(<number>, minmax(0, 1fr));"],
    ["grid-cols-none", "grid-template-columns: none;"],
    ["grid-cols-subgrid", "grid-template-columns: subgrid;"],
    ["grid-cols-[<value>]", "grid-template-columns: <value>;"],
    ["grid-cols-(<custom-property>)", "grid-template-columns: var(<custom-property>);"],
  ]}
/>

## Examples

### Specifying the grid columns

Use `grid-cols-<number>` utilities like `grid-cols-2` and `grid-cols-4` to create grids with _n_ equally sized columns:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-cols-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-fuchsia-500 p-4">01</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">02</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">03</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">04</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">05</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">06</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">07</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">08</div>
        <div className="rounded-lg bg-fuchsia-500 p-4">09</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grid-cols-4] -->
<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>
```

</Figure>

### Implementing a subgrid

Use the `grid-cols-subgrid` utility to adopt the column tracks defined by the item's parent:

<Figure>

<Example>
  {
    <div className="grid grid-cols-4 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">01</div>
      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">02</div>
      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">03</div>
      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">04</div>
      <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-900">05</div>
      <div className="col-span-3 grid grid-cols-subgrid gap-4">
        <Stripes border className="rounded-lg p-4" />
        <div className="rounded-lg bg-pink-500 p-4">06</div>
        <Stripes border className="rounded-lg p-4" />
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grid-cols-subgrid] -->
<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="col-span-3 grid grid-cols-subgrid gap-4">
    <div class="col-start-2">06</div>
  </div>
</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="grid-cols" name="columns" value="200px_minmax(900px,_1fr)_100px" />

### Responsive design

<ResponsiveDesign property="grid-template-columns" defaultClass="grid grid-cols-1" featuredClass="grid-cols-6" />