columns

columns

Sets the number of equal-width columns via --columns.

CSS Rules

.columns {
  columns: var(--columns);
}

Usage

<element class="columns" style="--columns: /* value */;" />

Responsive

Prefix .columns utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns" style="--md-columns: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns:hover" style="--columns-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns::before" style="--columns-before: /* value */;" />

<element class="content-after columns::after" style="--columns-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="columns=value" />

<!-- Output -->
<element class="columns" style="--columns: value;" />

columns-3xs

Sets a 3xs column width for multi-column layouts.

CSS Rules

.columns-3xs {
  columns: var(--container-3xs);
}

Usage

<element class="columns-3xs" />

Responsive

Prefix .columns-3xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-3xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-3xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-3xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-3xs::before" />

<element class="content-after columns-3xs::after" />

columns-2xs

Sets a 2xs column width for multi-column layouts.

CSS Rules

.columns-2xs {
  columns: var(--container-2xs);
}

Usage

<element class="columns-2xs" />

Responsive

Prefix .columns-2xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-2xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-2xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-2xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-2xs::before" />

<element class="content-after columns-2xs::after" />

columns-xs

Sets an xs column width for multi-column layouts.

CSS Rules

.columns-xs {
  columns: var(--container-xs);
}

Usage

<element class="columns-xs" />

Responsive

Prefix .columns-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-xs::before" />

<element class="content-after columns-xs::after" />

columns-sm

Sets a small column width for multi-column layouts.

CSS Rules

.columns-sm {
  columns: var(--container-sm);
}

Usage

<element class="columns-sm" />

Responsive

Prefix .columns-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-sm::before" />

<element class="content-after columns-sm::after" />

columns-md

Sets a medium column width for multi-column layouts.

CSS Rules

.columns-md {
  columns: var(--container-md);
}

Usage

<element class="columns-md" />

Responsive

Prefix .columns-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-md::before" />

<element class="content-after columns-md::after" />

columns-lg

Sets a large column width for multi-column layouts.

CSS Rules

.columns-lg {
  columns: var(--container-lg);
}

Usage

<element class="columns-lg" />

Responsive

Prefix .columns-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-lg::before" />

<element class="content-after columns-lg::after" />

columns-xl

Sets an xl column width for multi-column layouts.

CSS Rules

.columns-xl {
  columns: var(--container-xl);
}

Usage

<element class="columns-xl" />

Responsive

Prefix .columns-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-xl::before" />

<element class="content-after columns-xl::after" />

columns-2xl

Sets a 2xl column width for multi-column layouts.

CSS Rules

.columns-2xl {
  columns: var(--container-2xl);
}

Usage

<element class="columns-2xl" />

Responsive

Prefix .columns-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-2xl::before" />

<element class="content-after columns-2xl::after" />

columns-3xl

Sets a 3xl column width for multi-column layouts.

CSS Rules

.columns-3xl {
  columns: var(--container-3xl);
}

Usage

<element class="columns-3xl" />

Responsive

Prefix .columns-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-3xl::before" />

<element class="content-after columns-3xl::after" />

columns-4xl

Sets a 4xl column width for multi-column layouts.

CSS Rules

.columns-4xl {
  columns: var(--container-4xl);
}

Usage

<element class="columns-4xl" />

Responsive

Prefix .columns-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-4xl::before" />

<element class="content-after columns-4xl::after" />

columns-5xl

Sets a 5xl column width for multi-column layouts.

CSS Rules

.columns-5xl {
  columns: var(--container-5xl);
}

Usage

<element class="columns-5xl" />

Responsive

Prefix .columns-5xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-5xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-5xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-5xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-5xl::before" />

<element class="content-after columns-5xl::after" />

columns-6xl

Sets a 6xl column width for multi-column layouts.

CSS Rules

.columns-6xl {
  columns: var(--container-6xl);
}

Usage

<element class="columns-6xl" />

Responsive

Prefix .columns-6xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-6xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-6xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-6xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-6xl::before" />

<element class="content-after columns-6xl::after" />

columns-7xl

Sets a 7xl column width for multi-column layouts.

CSS Rules

.columns-7xl {
  columns: var(--container-7xl);
}

Usage

<element class="columns-7xl" />

Responsive

Prefix .columns-7xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-7xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-7xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-7xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-7xl::before" />

<element class="content-after columns-7xl::after" />

columns-auto

Allows column widths and counts to be determined automatically.

CSS Rules

.columns-auto {
  columns: auto;
}

Usage

<element class="columns-auto" />

Responsive

Prefix .columns-auto utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:columns-auto" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="columns-auto:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="columns-auto:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before columns-auto::before" />

<element class="content-after columns-auto::after" />