CSS Tip

Full-bleed layout with modern CSS

Use modern CSS and a few lines of code to create a full-bleed layout.

Full-bleed? It's when an element needs to bleed outside the main container and extend to the edge of the page.

CSS-only zig-zag borders

html {
  container-type: inline-size;
}
main {
  --w: 600px; /* the max-width */
  --m: 1em;   /* margin on small screen */
  
  margin-inline: max(   var(--m),(100cqw - var(--w))/2);
}
.full-bleed {
  margin-inline: min(-1*var(--m),(var(--w) - 100cqw)/2);
}

Another more-compact syntax

html {
  container-type: inline-size;
}
main {
  --_m: max(1em,(100cqw - 600px)/2);
  margin-inline: var(--_m);
}
.full-bleed {
  margin-inline: calc(-1*var(--_m));
}

See the Pen Full-bleed layout with modern CSS by Temani Afif (@t_afif) on CodePen.

Check the following to understand why margin-inline and max(): "max-width + centering with one instruction"

Here are other variations with different margin behaviors

html {
  container-type: inline-size;
}
main {
  --w: 600px; /* the max width*/
  --m: 1em;   /* minimum margin */
  
  margin-inline: max(var(--m),(100cqw - var(--w))/2);
}
.full-bleed-2 {
  margin-inline: min(-1*var(--m),(var(--w) - 100cqw)/2 + var(--m));
}
.full-bleed-3 {
  margin-inline: min(0px,(var(--w) - 100cqw)/2);
}
.full-bleed-4 {
  margin-inline: min(0px,(var(--w) - 100cqw)/2 + var(--m));
}

Resize the below demo to see the difference

See the Pen Full-bleed layout variations by Temani Afif (@t_afif) on CodePen.

More CSS Tips