Single Col

SingleCol lets you create a single-column layout. It’s basically a Wrap without horizontal padding.

Used for Single-column content

You can use width and self-* to shift the entire SingleCol column to the left, center, or right easily.

<div class="Wrap">
  <div class="SingleCol w-[15rem] self-end">
    <div>Inner Content</div>
    <div>Inner Content</div>
    <div>Inner Content</div>
  </div>
</div>

SingleCol

Inner Content

Hybrid between Wrap and Vertical

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

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

SingleCol

Inner Content

Basic Usage

SingleCol is usually used inside Wrap.

<div class="Wrap">
  <div class="SingleCol"> Inner Content </div>
</div>

Aligning Inner Wrap

If SingleCol is placed in Wrap, you can use shift* to shift the column to the left, center, or right. To do this, you also need to set width because SingleCol has width set to 100% by default.

If you don’t want to set width, you can use Vertical instead.

<div class="Wrap">
  <div class="SingleCol w-[20rem] self-start"> Inner Content </div>
  <div class="SingleCol w-[20rem] self-center"> Inner Content </div>
  <div class="SingleCol w-[20rem] self-end"> Inner Content </div>
</div>

Aligning Children Content

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

<div class="SingleCol">
  <div class="self-start"> Children items </div>
  <div class="self-center"> Children items </div>
  <div class="self-end"> Children items </div>
</div>

Gap between items

You can change the gap between items with the gap property. If you don’t use Tailwind, you can use the --gap variable.

<div class="SingleCol gap-8">
  <div>Child content</div>
  <div>Child content</div>
  <div>Child content</div>
</div>

<div class="SingleCol [--gap:2rem]">
  <div>Child content</div>
  <div>Child content</div>
  <div>Child 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 SingleCol.

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

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 CSS Properties

Properties	Default	Description
`width`	`100%`	Sets the width of the element.

Wrap children classes

Class	Description
`self-stretch`	Default value. Stretches the item.
`self-start`	Aligns item to the left.
`self-center`	Aligns item to the center.
`self-end`	Aligns item to the 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.