Breakout

Basic Usage

Breakout lets you break out of the container. It uses negative margins.

<div class="Breakout"></div>

<div style="margin-inline: -1rem;"></div>

Changing Breakout amounts

The default breakout amount is 1rem. You can change it by changing the --breakout variable. (Seriously, negative margins are probably easier).

<div class="Breakout [--breakout:2rem]"></div>

<div class="-mx-8"></div>

Breakout directions

You can use Breakout to break out of 4 directions — top, bottom, left, and right. We have also added Breakout-x and Breakout-y to break out on the inline and block axis.

Breakout out of overflow

Unfortunately, breakout (and negative margins) are unable to break out of elements with overflow set to hidden or scroll.

The best way to break out of elements with overflow is to move the element outside of the container.

<!-- The container -->
<div class="container-with-overflow">...</div>

<!-- The element you wanted to break -->
<div class="element"></div>

Full Breakouts

Full breakouts (that reaches the ends of the external container, commonly the viewport) is possible — but they require a bit of work.

If you search around the internet, you will undoubtedly find this good old snippet below:

// Doesn't work for all layouts
.Breakout-full {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

This snippet above works only if your content is centered.

If your content is not centered, you won’t be land a perfect breakout with almost any snippet you’ll find. The best way to breakout is through HTML — by placing the element outside of the container.

<!-- The container -->
<div class="container-with-overflow">...</div>

<!-- The element you wanted to break -->
<div class="element"></div>

Here’s the CSS for Breakout.

.Breakout,
.Breakout-inline {
  margin-inline: calc(var(--breakout, 1rem) * -1);
}

.Breakout-block {
  margin-block: calc(var(--breakout, 1rem) * -1);
}

.Breakout-left {
  margin-inline-start: calc(var(--breakout, 1rem) * -1);
}

.Breakout-right {
  margin-inline-end: calc(var(--breakout, 1rem) * -1);
}

.Breakout-top {
  margin-block-start: calc(var(--breakout, 1rem) * -1);
}

.Breakout-bottom {
  margin-block-end: calc(var(--breakout, 1rem) * -1);
}

.Breakout-full {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

Dividers

Modifiers

CSS Variables