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>