Grid With Breakout

grid-with-breakout is a three-column grid that gives you utilities to breakout of the main content — quickly and easily.

Create content with breakouts easily

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

Normal Content

Breakout Content

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;
}

Start Width

0.25fr

End Width

0.25fr

Normal Content

Breakout Content

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>

Breakout Start

Normal Content

Breakout End

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!

Normal Content

Basic Usage

grid-with-breakout creates a three-column grid.

The first and third columns are used for breakouts, while the second column is the main content area. All content will be placed in the second column by default.

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

Breakout Classes

You can use the following classes to control breakout behaviour of children items:

breakout-start-only: Place item on the left breakout column only.
breakout-start: Place items on the left breakout column and the content column.
breakout-end: Place items on the right breakout column and the content column.
breakout-end-only: Place item on the right breakout column only.
breakout-full: Breakout to both sides, allowing item to span the whole row.

<div class="grid-with-breakout">
  <div class="breakout-<placement>"> ... </div>
</div>

Adjusting column sizes

You can adjust the sizes of the breakout columns using CSS variables. The default values are 0.25fr for both sides, while the main content has a default value of 1fr.

Use --content-width to adjust the main content area.
Use --side-width to adjust both breakout columns at once.
Use --start-width to adjust the first column (left side).
Use --end-width to adjust the third column (right side).

--start-width and --end-width overrides --side-width when present.

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

Multi-column content

The best way to create content that spans multiple columns is to use another grid like grid-simple as the main content of grid-with-breakout. This assumes you have control over your HTML structure and can wrap your content in a grid.

<div class="grid-with-breakout">
  <div class="grid-simple [--cols:2]">
    <div>Column 1</div>
    <div>Column 2</div>
  </div>
</div>

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

Here’s the CSS for grid-with-breakout:

.grid-with-breakout {
  display: grid;
  grid-template-columns:
    minmax(0, var(--start-width, var(--side-width, 0.25fr)))
    minmax(0, var(--content-width, 1fr))
    minmax(0, var(--end-width, var(--side-width, 0.25fr)));
  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
  max-width: 100%;

  > * {
    grid-column: 2 / -2;
    max-width: 100%;
  }

  > .breakout-small {
    grid-column: auto / span 1;
  }

  > .breakout-start-only,
  > .breakout-left-only {
    grid-column: 1 / 2;
  }

  > .breakout-start,
  > .breakout-left {
    grid-column: 1 / -2;
  }

  > .breakout-end,
  > .breakout-right {
    grid-column: 2 / -1;
  }

  > .breakout-end-only,
  > .breakout-right-only {
    grid-column: -1 / -2;
  }

  > .breakout-full {
    grid-column: 1 / -1;
  }
}

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.