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),50cqw - var(--w)/2);
}
.full-bleed {
  margin-inline: min(-1*var(--m),var(--w)/2 - 50cqw);
}

Another more-compact syntax

html {
  container-type: inline-size;
}
main {
  --_m: max(1em,50cqw - 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),50cqw - var(--w)/2);
}
.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));
}

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