🩸 Full-bleed utility
01 Feb, 2023
👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page
Based on this article by Ryan Mulligan
.content {
display: grid;
grid-template-columns:
[full-start] 1fr
[content-start]
min(var(--content-max-width), 100% - var(--space-md) * 2)
[content-end]
1fr [full-end];
}
.content > * {
grid-column: content;
}
.content-fullBleed {
grid-column: full;
}
<main class="content">
<h1 class="headline">
Horizontal scrolling in a centered max-width container
</h1>
<p>Strip sirloin pig venison ribs flank hamburger landjaeger jerky.</p>
<div class="content-fullBleed">
<p>
Dragée lemon apple chocolate powder oat o marshmallow tiramisu ice gummies
cake snaps danish bonbon.
</p>
</div>
<p>Turkey belly shank biltong burgdoggen filet round tri chop.</p>
</main>
Alternate solution Jump to heading
From this article by Andy Bell
.full-bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
}
← Back home