0build.dev
Choose a layout

place-items

Report an Issue
Class Description

place-items-start

Aligns items to the start of their grid areas on both axes.

CSS Rules 

.place-items-start {
  place-items: start;
}

Usage 

<element class="place-items-start" />

Responsive

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

<element class="content-after place-items-start::after" />
 .place-items-start Aligns items to the start of their grid areas on both axes.

place-items-end

Aligns items to the end of their grid areas on both axes.

CSS Rules 

.place-items-end {
  place-items: end;
}

Usage 

<element class="place-items-end" />

Responsive

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

<element class="content-after place-items-end::after" />
 .place-items-end Aligns items to the end of their grid areas on both axes.

place-items-center

Sets place-items: center. Centers items on both axes within their grid cell.

CSS Rules 

.place-items-center {
  place-items: center;
}

Usage 

<element class="place-items-center" />

Responsive

Prefix .place-items-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:place-items-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="place-items-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="place-items-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 place-items-center::before" />

<element class="content-after place-items-center::after" />
 .place-items-center Sets place-items: center. Centers items on both axes within their grid cell.

place-items-baseline

Aligns items against the baseline of their grid areas on both axes.

CSS Rules 

.place-items-baseline {
  place-items: baseline;
}

Usage 

<element class="place-items-baseline" />

Responsive

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

<element class="md:place-items-baseline" />

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="place-items-baseline: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="place-items-baseline: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 place-items-baseline::before" />

<element class="content-after place-items-baseline::after" />
 .place-items-baseline Aligns items against the baseline of their grid areas on both axes.

place-items-stretch

Stretches items to fill their grid areas on both axes.

CSS Rules 

.place-items-stretch {
  place-items: stretch;
}

Usage 

<element class="place-items-stretch" />

Responsive

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

<element class="md:place-items-stretch" />

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="place-items-stretch: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="place-items-stretch: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 place-items-stretch::before" />

<element class="content-after place-items-stretch::after" />
 .place-items-stretch Stretches items to fill their grid areas on both axes.

place-items-end-safe

Safely aligns items to the end of their grid areas, preventing overflow clipping.

CSS Rules 

.place-items-end-safe {
  place-items: safe end;
}

Usage 

<element class="place-items-end-safe" />

Responsive

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

<element class="md:place-items-end-safe" />

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="place-items-end-safe: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="place-items-end-safe: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 place-items-end-safe::before" />

<element class="content-after place-items-end-safe::after" />
 .place-items-end-safe Safely aligns items to the end of their grid areas, preventing overflow clipping.

place-items-center-safe

Safely centers items in their grid areas, preventing overflow clipping.

CSS Rules 

.place-items-center-safe {
  place-items: safe center;
}

Usage 

<element class="place-items-center-safe" />

Responsive

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

<element class="md:place-items-center-safe" />

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="place-items-center-safe: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="place-items-center-safe: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 place-items-center-safe::before" />

<element class="content-after place-items-center-safe::after" />
 .place-items-center-safe Safely centers items in their grid areas, preventing overflow clipping.