grid-row

row

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

CSS Rules

.row {
  grid-row: var(--row);
}

Usage

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

Responsive

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

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

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

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

row-span

Sets how many grid rows an item spans via --row-span.

CSS Rules

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

Usage

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

Responsive

Prefix .row-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:row-span"
  style="
    --md-row-span: /* value */;
    --md-row-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="row-span:hover"
  style="
    --row-span-hover: /* value */;
    --row-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="row-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 row-span::before"
  style="
    --row-span-before: /* value */;
    --row-span-before: /* value */;
  "
></element>

<element
  class="content-after row-span::after"
  style="
    --row-span-after: /* value */;
    --row-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="row-span=value" />

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

row-start

Sets the row line where a grid item begins.

CSS Rules

.row-start {
  grid-row-start: var(--row-start);
}

Usage

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

Responsive

Prefix .row-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:row-start" style="--md-row-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="row-start:hover" style="--row-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="row-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 row-start::before" style="--row-start-before: /* value */;" />

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

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

row-end

Sets the row line where a grid item ends.

CSS Rules

.row-end {
  grid-row-end: var(--row-end);
}

Usage

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

Responsive

Prefix .row-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:row-end" style="--md-row-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="row-end:hover" style="--row-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="row-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 row-end::before" style="--row-end-before: /* value */;" />

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

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

row-auto

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

CSS Rules

.row-auto {
  grid-row: auto;
}

Usage

<element class="row-auto" />

Responsive

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

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

row-span-full

Makes a grid item span all rows.

CSS Rules

.row-span-full {
  grid-row: 1 / -1;
}

Usage

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

Responsive

Prefix .row-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:row-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="row-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="row-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 row-span-full::before" />

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

row-start-auto

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

CSS Rules

.row-start-auto {
  grid-row-start: auto;
}

Usage

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

Responsive

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

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

row-end-auto

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

CSS Rules

.row-end-auto {
  grid-row-end: auto;
}

Usage

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

Responsive

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

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