Basic Usage

wrap is used to prevent content from touching the edges of the screen.

<div class="wrap"> ... </div>

Responsive Padding

Just change the --wrap-padding variable at different breakpoints if you want the padding to be different on different screen sizes.

:root {
  --wrap-padding: 1rem;
}

@media screen and (width >= 800px) {
  :root {
    --wrap-padding: 2rem;
  }
}

Full-Width Backgrounds

wrap can be placed inside an element with a background to create a full-width background.

<div class="red-background">
  <div class="wrap"> Content goes here </div>
</div>

Breakouts

Use negative margins or the breakout class to create breakouts. Then, use wrap to prevent content from touching the edges of the screen again.

<div class="wrap">
  <div class="breakout bg-gray-700">
    <div class="wrap">Content goes here</div>
  </div>
</div>

Alternatively, use grid-with-breakout to create a grid with the option to breakout on either side.