grid-column

col

Places a grid item within columns using an arbitrary grid-column expression, such as span 2.

CSS Rules

.col {
  grid-column: var(--col);
}

Usage

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

Responsive

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

<element class="md:col" style="--md-col: /* 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="col:hover" style="--col-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="col: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 col::before" style="--col-before: /* value */;" />

<element class="content-after col::after" style="--col-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="col=value" />

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

col-span

Sets how many grid columns an item spans via --col-span.

CSS Rules

.col-span {
  grid-column: span var(--col-span) / span var(--col-span);
}

Usage

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

Responsive

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

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

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="col-span:hover"
  style="
    --col-span-hover: /* value */;
    --col-span-hover: /* value */;
  "
></element>

Group Hover Example

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

<element class="group">
  <element class="col-span: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 col-span::before"
  style="
    --col-span-before: /* value */;
    --col-span-before: /* value */;
  "
></element>

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

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="col-span=value" />

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

col-start

Sets grid-column-start via --col-start. Raw integer.

CSS Rules

.col-start {
  grid-column-start: var(--col-start);
}

Usage

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

Responsive

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

<element class="md:col-start" style="--md-col-start: /* 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="col-start:hover" style="--col-start-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="col-start: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 col-start::before" style="--col-start-before: /* value */;" />

<element class="content-after col-start::after" style="--col-start-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="col-start=value" />

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

col-end

Sets grid-column-end via --col-end. Raw integer.

CSS Rules

.col-end {
  grid-column-end: var(--col-end);
}

Usage

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

Responsive

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

<element class="md:col-end" style="--md-col-end: /* 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="col-end:hover" style="--col-end-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="col-end: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 col-end::before" style="--col-end-before: /* value */;" />

<element class="content-after col-end::after" style="--col-end-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="col-end=value" />

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

col-auto

Sets grid-column: auto.

CSS Rules

.col-auto {
  grid-column: auto;
}

Usage

<element class="col-auto" />

Responsive

Prefix .col-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:col-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="col-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="col-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 col-auto::before" />

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

col-span-full

Makes a grid item span all columns.

CSS Rules

.col-span-full {
  grid-column: 1 / -1;
}

Usage

<element class="col-span-full" />

Responsive

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

<element class="md:col-span-full" />

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="col-span-full: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="col-span-full: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 col-span-full::before" />

<element class="content-after col-span-full::after" />

col-start-auto

Sets grid-column-start to auto, letting the grid placement algorithm decide the column start.

CSS Rules

.col-start-auto {
  grid-column-start: auto;
}

Usage

<element class="col-start-auto" />

Responsive

Prefix .col-start-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:col-start-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="col-start-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="col-start-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 col-start-auto::before" />

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

col-end-auto

Sets grid-column-end to auto, letting the grid placement algorithm decide the column end.

CSS Rules

.col-end-auto {
  grid-column-end: auto;
}

Usage

<element class="col-end-auto" />

Responsive

Prefix .col-end-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:col-end-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="col-end-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="col-end-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 col-end-auto::before" />

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