On gists

Grid full-bleeding, full width

CSS trick

example.css Raw #

/*

https://fatbuddhadesigns.co.uk/journal/full-bleed-layouts/
https://www.joshwcomeau.com/css/full-bleed/
https://blog.logrocket.com/full-bleed-layout-css-grid/

*/




.wrapper {
  display: grid;
  grid-template-columns: 1fr min(60ch, calc(100% - 64px)) 1fr;
  grid-column-gap: 32px;
}


.full-bleed {
  grid-column: 1 / -1;
}


.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

example2.css Raw #

.container {
  display: grid;
  grid-template-columns: 1fr min(calc(100% - 20px), 43.75rem) 1fr;

}
.container > :not(.full-bleed) {
  grid-column: 2;
    background: mistyrose;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
  border: 1px solid red;
}