To recap: My technique required me needed to do some manual calculations that were dependent on the parent element. The result was a tad of CSS that contained some “magic numbers”:
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 used to do it)
To make the .content--fullwidth element break out of its parent container .main, I use a technique where I stretch it out so that it takes up the outer 100% again, and then recenter it.
One can achieve just this by giving the .content--fullwidth element:
A width which is the inverse of the width of .main to stretch it out. Here 1 / 70% = 142.857142857%
A negative translation on the X-axis equalling half of the remaining width to correctly position it. Here (100% - 70%) / 2 * -1 = -15%
When using CSS Grid, you have much nicer option. Last week at CSS Day I saw Rachel Andrew give a nice demo on how to break a set of images outside of the “content column”.
If you’re using CSS Grid then Rachel’s technique will come in handy. For projects in which you need to support older browsers, you can still rely on the first one.
💁♂️ New to CSS Grid Layout? Rachel has got you covered with her excellent Grid By Example.
Did this help you out? Like what you see? Consider donating.
I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!