Breaking Out of a Central Wrapper

That is an previous trick, however one I attain for simply usually sufficient to warrant a publish on this weblog — for no motive aside from my very own reference!

The issue

Suppose you might have a web page of content material, all neatly constrained inside a central wrapper. Most likely utilizing some type of utility class, like so:

.wrapper {
  width: 70rem;
  max-width: 100%;
  margin-inline: auto;
}

(I’m utilizing the margin-inline logical property as shorthand for margin-left and margin-right.)

However oh no! All of the sudden you end up in want of a part that spans the total width of the web page within the midst of your neatly constrained content material. What to do? Properly, there are a bunch of choices.

The answer(s)

Answer 1: Wrap the content material both aspect

OK, we may wrap the content material above and under our full-width part in our wrapper class.

Certain, that’ll work effectively sufficient. However that depends on us having adequate management over the markup, which isn’t all the time the case if, for example, your content material is coming from a CMS. And it doesn’t really feel like probably the most versatile resolution, if we wish to add extra full-width sections sooner or later.

Answer 2: Wrap each part

As an alternative of wrapping teams of elements, what about if we wrap each individually?

Once more, it really works the place we are able to management the markup, if we’ve constructed our personal customized elements. However in WordPress for example, paragraphs, heading, listing blocks and many others. are rendered as easy HTML parts, with none type of wrapping markup to hook into. There’s in all probability a method you may wrap each part in a <div> in case you’re au fait with PHP, WordPress and the block editor, however it’s definitely past my talents. And, in any case, it’d lead to in some points with accessibility and semantics, in addition to simply feeling type of gross. Div soup anybody?

Answer 3: Append a category to each part

Fairly than wrapping every part, how about including a category? We’ll give every of the elements that must be constrained the wrapper class. So our markup would find yourself one thing like this:

<most important>
  <h1 class="wrapper">Heading</h1>
  <p class="wrapper">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
  </p>
  <p class="wrapper">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur.
  </p>

  <!--Full width component-->
  <div>...</div>

  <p class="wrapper">
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
  </p>
</most important>

Or, we may go the opposite method: Set our wrapper kinds on all direct youngsters of our most important component, then set a full-width class on the full-width ones.

most important > * {
  width: 70rem;
  max-width: 100%;
  margin-inline: auto;
}

most important > .full-width {
  width: 100%;
}

This doesn’t appear to be an incredible resolution, because it assumes every direct youngster must be the identical width. You might need some elements that have to be narrower than that central wrapper, however nonetheless align with the remainder of the content material.

Adjusting the margins or widths of these parts may have unpredictable outcomes. For instance, setting a narrower width ends in misalignment.

To not point out, we’ll want to extend the specificity of the weather we wish to goal for particular person styling.

most important > * {
  width: 70rem;
  max-width: 100%;
  margin-inline: auto;
}

/* This can haven't any impact  :( */
p {
  width: 65ch;
}

/* We gotta do that as a substitute */
most important > p {
  width: 65ch;
}

Answer 4: Viewport width breakout approach

Utilizing viewport items, we are able to drive a component to interrupt out of the wrapper, with out altering our authentic markup! Initially shared by Una Kravets in 2018, this little CSS snippet will just do that:

.full-width {
  place: relative;
  proper: 50%;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

Useful! However you already know what? We are able to do it much more concisely with a remodel:

.full-width {
  width: 100vw;
  margin-left: 50%;
  remodel: translate3d(-50%, 0, 0);
}

This comes with a small caveat: It gained’t work if we’ve overflow: hidden on the wrapper component. Nonetheless, if we are able to keep away from that, and if we don’t have management over the markup (or even when we simply want a fast repair), this can be a nice resolution.

Answer 5: Grid

It is a grid sample I attain for time and time once more, ostensibly for exactly this kind of drawback. We create a grid with two flexible-width outer columns (utilizing the fr unit) and a number of max-width contrained columns. On this case, a single central column will serve our wants. I like to call my grid strains, to make placement simpler:

.wrapper {
  show: grid;
  grid-template-columns:
    [full-start] 1fr [wrapper-start]
    minmax(0, 70rem) [wrapper-end] 1fr [full-end];

  /* Elective hole */
  column-gap: var(--pad, 1rem);
}

Then we are able to place all direct youngsters of our wrapper into the central column, besides those that want to interrupt out:

.wrapper > * {
  grid-column: wrapper;
}

.wrapper > .full-width {
  grid-column: full;
}

I like so as to add a column hole once I’m utilizing this method, as a result of it means our grid can be responsive straight off — when the viewport is slim there can be an area between the sting of the viewport and the content material within the central column, we don’t want to make use of padding. I favor to not set a row hole, as I usually have to have extra management over the area between objects, giving headings more room above them than paragraphs, for example. Grid doesn’t allow us to set totally different hole values, so the areas between each merchandise can be the identical. Choosing margins as a substitute permits for extra management.

This demo exhibits the approach used for a web page format.

See the Pen
Untitled by Michelle Barker (@michellebarker)
on CodePen.

That is my favorite resolution to the breakout, and one I’ve used on loads of websites. My solely phrase of warning is that in case you’re retro-fitting an previous web site with this method, ensure you do loads of testing to ensure any leftover workarounds in your code don’t trigger format bugs.