Create content with breakouts easily

<div class="grid-with-breakout">
  <div>Normal Content</div>
  <div class="breakout-full">Breakout Content</div>
</div>

Adjust the breakout column sizes freely with CSS variables

You don’t always have to center your content — that’s boring. Unleash your creativity and create variations easily with a couple of CSS variables!

.grid-with-breakout {
  --start-width: 0.25fr;
  --end-width: 0.25fr;
}

Make original layouts by breaking out to one side instead of both.

Breaking out to one side is as simple as adding a class to the item. See the guide for more details!

<div class="grid-with-breakout">
  <div class="breakout-start">Breakout Start</div>
  <div>Normal Content</div>
  <div class="breakout-end">Breakout End</div>
</div>

Create pull quotes effortlessly

Just let your breakout item side on one side — again, with a class — and you’ll have your pull quote ready to go!