ContextQMD
Back to Tailwindcss

Columns

src/docs/columns.mdx

latest15.6 KB
Original Source

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

export const title = "columns"; export const description = "Utilities for controlling the number of columns within an element.";

<ApiTable rows={[ ["columns-<number>", "columns: <number>;"], ["columns-3xs", "columns: var(--container-3xs); /* 16rem (256px) /"], ["columns-2xs", "columns: var(--container-2xs); / 18rem (288px) /"], ["columns-xs", "columns: var(--container-xs); / 20rem (320px) /"], ["columns-sm", "columns: var(--container-sm); / 24rem (384px) /"], ["columns-md", "columns: var(--container-md); / 28rem (448px) /"], ["columns-lg", "columns: var(--container-lg); / 32rem (512px) /"], ["columns-xl", "columns: var(--container-xl); / 36rem (576px) /"], ["columns-2xl", "columns: var(--container-2xl); / 42rem (672px) /"], ["columns-3xl", "columns: var(--container-3xl); / 48rem (768px) /"], ["columns-4xl", "columns: var(--container-4xl); / 56rem (896px) /"], ["columns-5xl", "columns: var(--container-5xl); / 64rem (1024px) /"], ["columns-6xl", "columns: var(--container-6xl); / 72rem (1152px) /"], ["columns-7xl", "columns: var(--container-7xl); / 80rem (1280px) */"], ["columns-auto", "columns: auto;"], ["columns-(<custom-property>)", "columns: var(<custom-property>);"], ["columns-[<value>]", "columns: <value>;"], ]} />

Examples

Setting by number

Use columns-<number> utilities like columns-3 to set the number of columns that should be created for the content within an element:

<Figure> <Example> { <div className="@container relative"> <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-3 gap-[5cqw]"> <Stripes border="x" /> <Stripes border="x" /> <Stripes border="x" /> </div> <div className="relative -mb-[5cqw] columns-3 gap-[5cqw] *:mb-[5cqw]"> 
  </div>
</div>

} </Example>

html
<!-- [!code classes:columns-3] -->
<div class="columns-3 ...">
  
  
  
  <!-- ... -->
</div>
</Figure>

The column width will automatically adjust to accommodate the specified number of columns.

Setting by width

Use utilities like columns-xs and columns-sm to set the ideal column width for the content within an element:

<Figure desktopHint="Resize the example to see the expected behavior"> <Example resizable> { <div className="@container relative"> <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-1 gap-8 @[34rem]:grid-cols-2"> <Stripes border="x" /> <Stripes border="x" /> <Stripes border="x" className="@[34rem]:hidden" /> </div> <div className="relative -mb-4 columns-3xs gap-4 *:mb-4 @sm:-mb-8 @sm:gap-8 @sm:*:mb-8"> 
  </div>
</div>

} </Example>

html
<!-- [!code classes:columns-3xs] -->
<div class="columns-3xs ...">
  
  
  
  <!-- ... -->
</div>
</Figure>

When setting the column width, the number of columns automatically adjusts to ensure they don't get too narrow.

Setting the column gap

Use the gap-<width> utilities to specify the width between columns:

<Figure> <Example> { <div className="@container relative"> <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-[1fr_2rem_1fr_2rem_1fr]"> <div /> <Stripes border="x" /> <div /> <Stripes border="x" /> <div /> </div> <div className="relative -mb-8 columns-3 gap-8 *:mb-8"> 
  </div>
</div>

} </Example>

html
<!-- [!code classes:gap-8] -->
<div class="columns-3 gap-8 ...">
  
  
  
  <!-- ... -->
</div>
</Figure>

Learn more about the gap utilities in the gap documentation.

Using a custom value

<UsingACustomValue utility="columns" value="30vw" />

Responsive design

<ResponsiveDesign property="columns" breakpoint="sm" featuredClass="aspect-square"> <Figure desktopHint="Resize the example to see the expected behavior"> <Example resizable> { <div className="@container relative"> <div className="absolute inset-0 -top-8 -bottom-8 grid grid-cols-2 gap-4 @sm:grid-cols-3 @sm:gap-8"> <Stripes border="x" /> <Stripes border="x" /> <Stripes border="x" className="@max-sm:hidden" /> </div> <div className="relative columns-2 gap-4 *:mb-4 @sm:-mb-8 @sm:columns-3 @sm:gap-8 @sm:*:mb-8"> 
  </div>
</div>

} </Example>

html
<!-- [!code classes:sm:gap-8,sm:columns-3] -->
<div class="columns-2 gap-4 sm:columns-3 sm:gap-8 ...">
  
  
  
  <!-- ... -->
</div>
</Figure> </ResponsiveDesign>

Customizing your theme

<CustomizingYourTheme utility="columns" themeKey="container" name="fixed-width column" customName="4xs" customValue="14rem" />