0build.dev
Choose a layout

scroll-snap-align

Report an Issue
Class Description

snap-start

Sets scroll-snap-align: start on a snap child.

CSS Rules 

.snap-start {
  scroll-snap-align: start;
}

Usage 

<element class="snap-start" />

Responsive

Prefix .snap-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:snap-start" />

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="snap-start: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="snap-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 snap-start::before" />

<element class="content-after snap-start::after" />
 .snap-start Sets scroll-snap-align: start on a snap child.

snap-end

Sets scroll-snap-align to end, snapping the element's end edge to the scroll container.

CSS Rules 

.snap-end {
  scroll-snap-align: end;
}

Usage 

<element class="snap-end" />

Responsive

Prefix .snap-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:snap-end" />

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="snap-end: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="snap-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 snap-end::before" />

<element class="content-after snap-end::after" />
 .snap-end Sets scroll-snap-align to end, snapping the element's end edge to the scroll container.

snap-center

Sets scroll-snap-align: center on a snap child.

CSS Rules 

.snap-center {
  scroll-snap-align: center;
}

Usage 

<element class="snap-center" />

Responsive

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

<element class="md:snap-center" />

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="snap-center: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="snap-center: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 snap-center::before" />

<element class="content-after snap-center::after" />
 .snap-center Sets scroll-snap-align: center on a snap child.

snap-align-none

Sets scroll-snap-align to none, opting the element out of scroll snapping.

CSS Rules 

.snap-align-none {
  scroll-snap-align: none;
}

Usage 

<element class="snap-align-none" />

Responsive

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

<element class="md:snap-align-none" />

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="snap-align-none: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="snap-align-none: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 snap-align-none::before" />

<element class="content-after snap-align-none::after" />
 .snap-align-none Sets scroll-snap-align to none, opting the element out of scroll snapping.