Wrap

Wrap creates horizontal paddings so your content doesn’t touch the edges of the screen. It is commonly used directly in the Content of Shell layouts.

Pretty straightforward stuff

This adds padding-inline to the element you apply it to.

<div class="Wrap">Wrapped content</div>

Wrapped content

Behaves like Vertical

Wrap behaves like Vertical so you can place items on the left, center, or right easily.

<div class="Wrap">
  <div class="self-start">Left-aligned</div>
  <div class="self-center">Centered</div>
  <div class="self-end">Right-aligned</div>
</div>

Left-aligned

Centered

Right-aligned

Set your maximum width easily

We’ve set max-width: 100% to Wrap so you can just set width easily.

The additional benefit of doing this: your content retains a minimum size at width even if there’s insufficient content.

<div class="Wrap w-[20rem]">Wrapped content</div>

Wrapped content

Basic Usage

Wrap is used to prevent content from touching the edges of the screen.

<div class="Wrap"> Content goes here </div>

Changing width

Wrap has width and max-width set to 100% so it stretches the entire width.

To constrain the wrapped element, set the width property. (Using width instead of max-width prevents the element from collapsing when there’s insufficient content).

<div class="Wrap w-[25rem] "> Wrapped content </div>

Spacing Between Wraps

When one Wrap follows another, the second Wrap has a default margin-top of 1rem for visual separation. You can change this value by writing some CSS.

<div class="Wrap"> ... </div>
<div class="Wrap"> ... </div>

.Wrap + .Wrap {
  margin-top: 0;
}

Full-Width Backgrounds

Create full-width backgrounds by placing Wrap inside an element with a background.

<div class="bg-gray-700">
  <div class="Wrap"> Content goes here </div>
</div>

If you need to break out from the Wrap element, you can use Breakout. After breaking out, you can still add Wrap or padding-inline to prevent inner content from touching the edges of the screen.

<div class="Wrap">
  <div class="Breakout bg-gray-700">
    <div class="Wrap"> Content goes here </div>
  </div>
</div>

Aligning Child Elements

Wrap behaves like Vertical so you can align items to the left, center, or right easily.

<div class="Wrap">
  <div class="self-start">Left-aligned</div>
  <div class="self-center">Centered</div>
  <div class="self-end">Right-aligned</div>
</div>

Gap between items

You can change the gap between items with the gap property or the --gap variable.

<div class="Wrap" style="--gap: 2rem">
  <div>Wrapped Content</div>
  <div>Wrapped Content</div>
  <div>Wrapped Content</div>
</div>

<div class="Wrap gap-8">
  <div>Wrapped Content</div>
  <div>Wrapped Content</div>
  <div>Wrapped Content</div>
</div>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Here’s the CSS for Wrap. We wrote it in Sass so you may have to adjust it accordingly.

.Wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap, 1rem);
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;

  :where(&) + & {
    margin-top: 1rem;
  }
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Wrap

Properties

Property	Default	Description
`gap`	`1rem`	Sets the gap between child elements.
`width`	`100%`	Sets the width of the element.

CSS Variables

Variable	Default	Description
`--gap`	`1rem`	Sets the gap between child elements.

Wrap Children

Classes

Class	Description
`self-stretch`	Default value. Stretches the item.
`self-start`	Aligns the item to the start (left).
`self-center`	Aligns the item to the center.
`self-end`	Aligns the item to the end (right).

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.