I recently shared a trick on how to create a Full-bleed layout using a few lines of modern CSS code. If you are unfamiliar with such layout see the demo below. In this article we’ll dig deeper into the idea and explain things as we go.
The main content area is limited to a certain width and centered but a few elements “bleed” to the outside edges, filling the entire page width. There are already a lot of techniques to create such a layout but the one I came up with relies on modern features and only 4 lines of code.
html {
container-type: inline-size;
}
main {
--_m: max(1em, 50cqw - 400px/2);
margin-inline: var(--_m);
}
.full-bleed {
margin-inline: calc(-1 * var(--_m));
}Code language: CSS (css)You might look at that code and think it’s unreadable and hacky. If so, after we dissect it together, I hope to change your mind. You will soon understand the logic behind it and see it’s actually a rather efficient way of handling this situation.
<html> a container?You might be familiar with viewport units such as vw. The use of 100vw essentially means “the width of the browser window” a.k.a the viewport. It’s common to rely on such a metric, but it comes with a drawback: whether or not you have a scrollbar width: 100vw will always give the same result. This is a bit frustrating and sometimes we wind up with unwanted overflow.
Here is a quick demo to illustrate the issue:
The container has a height equal to 500px. If the page is tall enough to show the whole container, everything is fine but once the height gets smaller and we need to scroll the page, another scroll appears at the bottom!
Ideally, we want 100vw to behave differently, but it won’t, so we have to find something else. You’d think the advent of the dvw unit would have been an opportunity to fix this, but it does not.
Making the <html> element a container is one solution because it will unlock the ability to query the width of the html (instead of the whole page) by using 100cqw. Since the <html> element is the uppermost element of the page and it is a block-level element it will always (unless you override this behavior) have the width of the page while considering the scrollbar. In other words, 100cqw will get smaller when a scrollbar appears on the page — which is perfect!
Here is the previous demo using 100cqw instead of 100vw. No more issue this time!
Instead of relying on 100vw like most of the techniques, I will use 100cqw which is slightly better and for this, I have to make the <html> element a container.
I am deliberately skipping the explanation of what “container” means to avoid making this article too long. If you are unfamiliar with this, it refers to the relatively recent ability in CSS to do “container queries”. Check out this article.
margin?If I told you we need a container with a max-width which is centered horizontally, you will like intuitively do this:
main {
max-width: 400px;
margin-inline: auto; /* or: margin: 0 auto; */
}Code language: CSS (css)This is fairly simple, efficient, and people with basic CSS experience will understand it. I’d advise you to keep doing this, but we can also do the same using only margin like I detail in my post max-width + centering with one instruction.
If the container needs to have a max-width equal to w, then the remaining space on both sides is equal to 50% - w/2 where 50% refers to the parent width. If we define the margin using that space, we have what we want.
It may be a bit counter-intuitive, but it’s logical. We either define the width and tell the browser to calculate the margin for us (using auto), or we do the opposite and define the margin then the browser will calculate the width for us. Unlike margin, the default value of width is already auto so defining the margin is enough.
main {
margin-inline: max(0px, 50% - 600px/2);
}Code language: CSS (css)I am using max() to avoid getting negative values on small screens. In other words, I am clamping the value to 0.
Let’s suppose that the margin is equal to 100px at some points. If an element inside the container has a margin equal to the opposite (i.e. -100px) it will negate the previous margin and extend to the full width of the container.
Do you see the trick now? The same margin used to set the max-width and center the main container is also used (with a negative sign) on the “full-bleed” elements to make them “bleed” outside the container and extend to the edge of the screen!
main {
--_m: max(0px, 50% - 600px/2);
margin-inline: var(--_m);
}
.full-bleed {
margin-inline: calc(-1 * var(--_m));
}Code language: CSS (css)The margin is defined as a custom property and is used twice: on the main container, and with a negative sign on the “full-bleed” class.
It looks perfect but the above code won’t work! Be careful — I’ve tricked you!
We are using percentage values which means the reference for the calculation is not the same for both elements so both margins will never be equal (I know: percentages are always frustrating).
I think you know what will be the solution, right? We rely on the cqw unit we detailed previously to make sure the reference is always the same (the width of the page while considering the scrollbar).
With that our puzzle is complete! A full-bleed layout with a simple code:
html {
container-type: inline-size;
}
main {
--_m: max(0px, 50cqw - 600px/2);
margin-inline: var(--_m);
}
.full-bleed {
margin-inline: calc(-1 * var(--_m));
}Code language: CSS (css)As a bonus, you can replace the 0px inside the max() function with any value and it act as a “minimum margin”. That is, the margin that your main container will have on small screens.
Now that we know how it works, let’s re-write the code in a bit more friendly-to-read way:
html {
container-type: inline-size;
}
main {
--w: 600px; /* the max-width */
--m: 1em; /* margin on small screen */
margin-inline: max( var(--m),50cqw - var(--w)/2);
}
.full-bleed {
margin-inline: min(-1*var(--m),var(--w)/2 - 50cqw);
/* same as
margin-inline: calc(-1*max(var(--m),50cqw - var(--w)/2))
*/
}Code language: CSS (css)This is slightly better because all you have to do is update a few custom property values. With this syntax, we can also create more variations where we can update the margin behavior of the “full-bleed” elements.
If, for example, we replace -1*var(--m) with 0px
.full-bleed {
margin-inline: min(0px, var(--w)/2 - 50cqw);
}Code language: CSS (css)The elements will have a margin equal to --m on small screens. In other words, the elements lose their “bleed-out” behavior on small screens.
I came up with a total of four variations (including the default one):
.full-bleed-1 {
margin-inline: min(-1*var(--m),var(--w)/2 - 50cqw);
}
.full-bleed-2 {
margin-inline: min(-1*var(--m),var(--w)/2 - 50cqw + var(--m));
}
.full-bleed-3 {
margin-inline: min( 0px,var(--w)/2 - 50cqw);
}
.full-bleed-4 {
margin-inline: min( 0px,var(--w)/2 - 50cqw + var(--m));
}Code language: CSS (css)Here is a demo to illustrate the behavior of each one. Make it full screen and resize it to understand each variation.
Let’s end with one last demo where it’s only the background color that extends to the edge of the screen. The content is still restricted to the same maximum width as everything else. This is a particular case of full-bleed layout where we don’t need to mess with margin and complex calculation, and has an entirely different trick up it’s sleeve. I’ll leave it to you to poke at the code and see it.
This demo relies on a single line of code where I’m using the outset feature of border-image to have overflowing coloration on both sides. The border-image property is a bit tricky to grasp, but I have a detailed article if you want to learn more about it: “The Complex but Awesome CSS border-image Property“.
Cool, right? Not only have we created a full-bleed layout with compact code but we can easily adjust it to control the margin behavior of the elements. Can you think of other variations? I am sure we could tweak the formulas to have other useful and interesting behaviors. The comment section is down below if you have some good ideas.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。