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

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

export const title = "grid-column";
export const description = "Utilities for controlling how elements are sized and placed across grid columns.";

<ApiTable
  rows={[
    ["col-span-<number>", "grid-column: span <number> / span <number>;"],
    ["col-span-full", "grid-column: 1 / -1;"],
    ["col-span-(<custom-property>)", "grid-column: span var(<custom-property>) / span var(<custom-property>);"],
    ["col-span-[<value>]", "grid-column: span <value> / span <value>;"],
    ["col-start-<number>", "grid-column-start: <number>;"],
    ["-col-start-<number>", "grid-column-start: calc(<number> * -1);"],
    ["col-start-auto", "grid-column-start: auto;"],
    ["col-start-(<custom-property>)", "grid-column-start: var(<custom-property>);"],
    ["col-start-[<value>]", "grid-column-start: <value>;"],
    ["col-end-<number>", "grid-column-end: <number>;"],
    ["-col-end-<number>", "grid-column-end: calc(<number> * -1);"],
    ["col-end-auto", "grid-column-end: auto;"],
    ["col-end-(<custom-property>)", "grid-column-end: var(<custom-property>);"],
    ["col-end-[<value>]", "grid-column-end: <value>;"],
    ["col-auto", "grid-column: auto;"],
    ["col-<number>", "grid-column: <number>;"],
    ["-col-<number>", "grid-column: calc(<number> * -1);"],
    ["col-(<custom-property>)", "grid-column: var(<custom-property>);"],
    ["col-[<value>]", "grid-column: <value>;"],
  ]}
/>

## Examples

### Spanning columns

Use `col-span-<number>` utilities like `col-span-2` and `col-span-4` to make an element span _n_ 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-3 gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">01</div>
        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">02</div>
        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">03</div>
        <div className="col-span-2 rounded-lg bg-indigo-500 p-4">04</div>
        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">05</div>
        <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">06</div>
        <div className="col-span-2 rounded-lg bg-indigo-500 p-4">07</div>
      </div>
    </div>
  }
</Example>

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

</Figure>

### Starting and ending lines

Use `col-start-<number>` or `col-end-<number>` utilities like `col-start-2` and `col-end-3` to make an element start or end at the _nth_ grid line:

<Figure>

<Example>
  {
    <div className="grid grid-cols-6 gap-4 text-center font-mono text-sm leading-6 font-bold text-white">
      <Stripes border className="rounded-lg p-4" />
      <div className="col-span-4 col-start-2 rounded-lg bg-sky-500 p-4">01</div>
      <Stripes border className="rounded-lg p-4" />
      <div className="col-start-1 col-end-3 rounded-lg bg-sky-500 p-4">02</div>
      <Stripes border className="rounded-lg p-4" />
      <Stripes border className="rounded-lg p-4" />
      <div className="col-span-2 col-end-7 rounded-lg bg-sky-500 p-4">03</div>
      <div className="col-start-1 col-end-7 rounded-lg bg-sky-500 p-4">04</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:col-start-1,col-start-2,col-end-3,col-end-7] -->
<div class="grid grid-cols-6 gap-4">
  <div class="col-span-4 col-start-2 ...">01</div>
  <div class="col-start-1 col-end-3 ...">02</div>
  <div class="col-span-2 col-end-7 ...">03</div>
  <div class="col-start-1 col-end-7 ...">04</div>
</div>
```

</Figure>

These can also be combined with the `col-span-<number>` utilities to span a specific number of columns.

### Using a custom value

<UsingACustomValue
  utilities={["col", "col-span", "col-start", "col-end"]}
  variable="columns"
  name="grid column size and location"
  value="16_/_span_16"
/>

### Responsive design

<ResponsiveDesign
  properties={["grid-column", "grid-column-start", "grid-column-end"]}
  defaultClass="col-span-2"
  featuredClass="col-span-6"
/>