Tip - Full Bleed layouts using simple css

by Will Moody

Approximate Reading Time: 1 minute

A full bleed section of content is a full-width element with other content limited in width by a constrained-width element, like a column of text maybe to 65-85 characters for readability and a full-width image.

Below are three examples showing how to achieve this.

Both the first and second examples require adding a class to the HTML of your page, as the example below, see the full--bleed class on the image element.

<main class="wrapper">
<h1>Some Heading</h1>
<p>Some content and interesting stuff that may help</p>  
<img class="full--bleed" alt="cute meerkat" src="/meerkat.jpg">
</main>

The first example works if the full-width content is centred and if you don’t mind having to hide overflow-x on the column to prevent horizontal overflow.

.full--bleed {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}

The second method is explained in detail in this article by Joshua Comeau here and uses CSS Grid

This method sets up three columns using a grid, then limits the text content to the centre column while the images span all columns, relatively simple again.

.wrapper {  
display: grid;  
grid-template-columns: 1fr min(65ch, 100%) 1fr;
}
.wrapper > * {
grid-column: 2;
}
.full--bleed {
width: 100%;
grid-column: 1 / 4;
}

Kilian Valkhof offers a third and I think the most elegant solution, you can see his article, Full bleed layout using simple CSS.

Kilian's solution is very simple to implement in that you can simply apply some CSS rules to the items that you want to be full width by using the :not() pseudo-class like this:-

main > *:not(img):not(div) {
max-width: 65ch;
margin: 2rem auto;
}

In this case, only images and divs will be full width whereas articles and sections and all they contain would be limited in width to 65ch, this means you do not have to remember to add a class to your HTML.

You can see the code I use in the Codepen embed below.

See the Pen Full Bleed Layout using simple CSS by Will Moody (@FatBuddha) on CodePen.