0build.dev
Choose a layout

place-content

Report an Issue
Class Description

place-content-center

Sets place-content: center. Shorthand for align + justify center.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after place-content-center::after" />
 .place-content-center Sets place-content: center. Shorthand for align + justify center.

place-content-start

Packs items toward the start of the block and inline axis in a flex/grid container.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after place-content-start::after" />
 .place-content-start Packs items toward the start of the block and inline axis in a flex/grid container.

place-content-end

Packs items toward the end of the block and inline axis in a flex/grid container.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after place-content-end::after" />
 .place-content-end Packs items toward the end of the block and inline axis in a flex/grid container.

place-content-between

Distributes items with equal space between them on both axes in a flex/grid container.

CSS Rules 

.place-content-between {
  place-content: space-between;
}

Usage 

<element class="place-content-between" />

Responsive

Prefix .place-content-between 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-content-between" />

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-content-between: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-content-between: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-content-between::before" />

<element class="content-after place-content-between::after" />
 .place-content-between Distributes items with equal space between them on both axes in a flex/grid container.

place-content-around

Distributes items with equal space around them on both axes in a flex/grid container.

CSS Rules 

.place-content-around {
  place-content: space-around;
}

Usage 

<element class="place-content-around" />

Responsive

Prefix .place-content-around 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-content-around" />

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-content-around: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-content-around: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-content-around::before" />

<element class="content-after place-content-around::after" />
 .place-content-around Distributes items with equal space around them on both axes in a flex/grid container.

place-content-evenly

Distributes items with equal space evenly on both axes in a flex/grid container.

CSS Rules 

.place-content-evenly {
  place-content: space-evenly;
}

Usage 

<element class="place-content-evenly" />

Responsive

Prefix .place-content-evenly 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-content-evenly" />

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-content-evenly: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-content-evenly: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-content-evenly::before" />

<element class="content-after place-content-evenly::after" />
 .place-content-evenly Distributes items with equal space evenly on both axes in a flex/grid container.

place-content-baseline

Aligns content against the baseline on both axes in a flex/grid container.

CSS Rules 

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

Usage 

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

Responsive

Prefix .place-content-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-content-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-content-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-content-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-content-baseline::before" />

<element class="content-after place-content-baseline::after" />
 .place-content-baseline Aligns content against the baseline on both axes in a flex/grid container.

place-content-stretch

Stretches items to fill the container on both axes in a flex/grid container.

CSS Rules 

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

Usage 

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

Responsive

Prefix .place-content-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-content-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-content-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-content-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-content-stretch::before" />

<element class="content-after place-content-stretch::after" />
 .place-content-stretch Stretches items to fill the container on both axes in a flex/grid container.

place-content-end-safe

Safely packs items toward the end of both axes, preventing data loss if content overflows.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after place-content-end-safe::after" />
 .place-content-end-safe Safely packs items toward the end of both axes, preventing data loss if content overflows.

place-content-center-safe

Safely centers items on both axes, preventing data loss if content overflows.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after place-content-center-safe::after" />
 .place-content-center-safe Safely centers items on both axes, preventing data loss if content overflows.