Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Full Bleed Layouts Using Simple CSS

Full bleed layout using css and grid


Reading Time: (approx) 2 min

Tags that this post has been filed under.

The main content about Full Bleed Layouts Using Simple CSS

Tip - Full Bleed layouts using simple CSS

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">

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 div’s 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.

Working Codepen Example: follow this link

Journal Index

Previous Article: Manipulating Colours Using HSLA & CSS Variables

Next Article: Simple Steps To Improve Website SEO