🩸 Full-bleed utility

Note date 01 Feb, 2023
Tags css html
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

From this article by Andy Bell

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
← Back home