The blob of CSS first makes the targeted element fullwidth, then shifts its left edge to the center of the page, and then translates the entire element back to the left edge of the page again. Clever!
Where this technique differs from the CSS Grid technique is that he CSS Grid one will also work fine in scenarios where you want to stretch out an element inside a any parent container (other than the page), whereas the .full-bleed utility always stretches an element out so that it’s full page (not “full container”).
A common thing to see in a design are visuals that break out of the main content column. You most likely have already seen this kind of design over at Medium for example, where it’s common for the main visual to be full width (or “full bleed”), whilst the content remains centered.
Your typical Medium layout: content caged in a central column + fullwidth visual breaking out of that column
Last week, whilst attending CSS Day I learnt of a technique I hadn’t seen before to solving this problem.
The old tried and battle tested way of doing it (or at least the way I do it)