Wrapper Utility

Our wrapper utility is constructed as follows:

.wrapper {
  display: grid;
  grid-template-columns: [full-start] 1fr [wrapper-start] minmax(0, 80rem) [wrapper-end] 1fr [full-end];
  gap: 0 var(--size-400);
  margin: 0 auto;
}

.wrapper>* {
  grid-column: var(--wrapper-column, wrapper);
}

Purpose

The wrapper utility is a common utility used for container a site to a max width. Quite often certain designs contain multiple widths, so multiple wrappers may be needed.

Example

<div class="wrapper"></div>