0build.dev
Choose a layout

justify-items

Report an Issue
Class Description

justify-items-start

Aligns grid/flex items to the start of their inline axis via justify-items.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after justify-items-start::after" />
 .justify-items-start Aligns grid/flex items to the start of their inline axis via justify-items.

justify-items-end

Aligns grid/flex items to the end of their inline axis via justify-items.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after justify-items-end::after" />
 .justify-items-end Aligns grid/flex items to the end of their inline axis via justify-items.

justify-items-center

Centers grid/flex items along their inline axis via justify-items.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after justify-items-center::after" />
 .justify-items-center Centers grid/flex items along their inline axis via justify-items.

justify-items-stretch

Stretches grid/flex items to fill their inline axis via justify-items.

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after justify-items-stretch::after" />
 .justify-items-stretch Stretches grid/flex items to fill their inline axis via justify-items.

justify-items-end-safe

Aligns items to the end of the inline axis, falling back to start when space is insufficient (overflow-safe).

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after justify-items-end-safe::after" />
 .justify-items-end-safe Aligns items to the end of the inline axis, falling back to start when space is insufficient (overflow-safe).

justify-items-center-safe

Centers items along the inline axis, falling back to start when space is insufficient (overflow-safe).

CSS Rules 

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

Usage 

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

Responsive

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

<element class="content-after justify-items-center-safe::after" />
 .justify-items-center-safe Centers items along the inline axis, falling back to start when space is insufficient (overflow-safe).

justify-items-normal

Sets justify-items to normal, using the default item justification behavior.

CSS Rules 

.justify-items-normal {
  justify-items: normal;
}

Usage 

<element class="justify-items-normal" />

Responsive

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

<element class="md:justify-items-normal" />

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="justify-items-normal: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="justify-items-normal: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 justify-items-normal::before" />

<element class="content-after justify-items-normal::after" />
 .justify-items-normal Sets justify-items to normal, using the default item justification behavior.