Menu
I want to have the ability to do full bleeds (displaying an item from edge to edge on the viewport) within my grid setup. I would like to have the item with the class full-bleed to span the design-grid and wrapper-grid.
I am open to other ways of constructing the DOM to get this to work, but I would like to keep using grid instead of absolute positioning.
.wrapper-grid {
display: grid;
grid-template-columns: 1fr min(65ch, 100%) 1fr;
row-gap: 1rem;
}
.design-grid {
display: grid;
/* I can't have subgrid and declare a new grid */
/* grid-template-clomns: subgrid; */
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.wrapper-grid>* {
grid-column: 2;
}
.full-bleed {
grid-column: 1 / -1;
}
.item {
height: 40px;
background-color: #f1f1f1;
}<body class="wrapper-grid">
<div class="design-grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item full-bleed">This item should go to both edges of the viewport</div>
<div class="item"></div>
</div>
</body>
688
asked Aug 31 '25 03:08
Here is an idea using margin with some calculation. Also you don't have to use a nested grid configuration. One grid is enough.
Related article from my blog to understand the use of margin-inline: https://css-tip.com/center-max-width/
.wrapper-grid {
--w: 65ch; /* the max width*/
margin-inline: max(0px, (100vw - var(--w))/2);
}
.design-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.full-bleed {
grid-column: 1 / -1;
/* this one is the opposite of the above to negate it and get the full bleed effect */
margin-inline: min(0px, (var(--w) - 100vw)/2);
}
.item {
height: 40px;
background-color: #f1f1f1;
}<body class="wrapper-grid">
<div class="design-grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item full-bleed">This item should go to both edges of the viewport</div>
<div class="item"></div>
</div>
</body>And in case you want to keep your nested grid
.wrapper-grid {
--w: 65ch; /* the max width*/
display: grid;
grid-template-columns: 1fr min(var(--w), 100%) 1fr;
row-gap: 1rem;
}
.design-grid {
display: grid;
grid-column: 2;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.full-bleed {
grid-column: 1 / -1;
/* this one is the opposite of the above to negate it and get the full bleed effect */
margin-inline: min(0px, (var(--w) - 100vw)/2);
}
.item {
height: 40px;
background-color: #f1f1f1;
}<body class="wrapper-grid">
<div class="design-grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item full-bleed">This item should go to both edges of the viewport</div>
<div class="item"></div>
</div>
</body>You can design your grid using more columns than the content requires and then adjust the column span on the row that needs to fill the screen width.
Note: There is probably a lesser method, but hopefully this gets the point across.
.wrapper-grid {
margin: 0 auto;
width: 100%;
}
.design-grid {
min-height: 200px;
display: grid;
grid-auto-columns: 1fr;
grid-template-areas:
'r1c1 r1c2 r1c3 r1c4 r1c5 r1c6'
'r2c1 r2c2 r2c3 r2c4 r2c5 r2c6'
'r3c1 r3c2 r3c3 r3c4 r3c5 r3c6';
grid-gap: .2rem;
}
.item {
display: flex;
justify-content: center;
align-items: center;
background: cyan;
}
.item:nth-child(1) {grid-area: r1c2;}
.item:nth-child(2) {grid-area: r1c3;}
.item:nth-child(3) {grid-area: r1c4;}
.item:nth-child(4) {grid-area: r1c5;}
.item:nth-child(5) {grid-column: span 6 }
.item:nth-child(6) {grid-area: r3c2;}<body class="wrapper-grid">
<div class="design-grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item full-bleed">This item should go to both edges of the viewport</div>
<div class="item"></div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With