CodePen Embed - Bleeding grid columns

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--bleed" style="grid-column: 2 / span 3"></div>
</div>

.grid {
  --column-gap: 1rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--column-gap);
}
.grid-item {
  --grid-item-background: #eee;
  background-color: var(--grid-item-background);
  min-height: 5rem;
}
.grid-item--bleed {
  box-shadow: calc(var(--column-gap) * -1) 0 var(--grid-item-background),
    var(--column-gap) 0 var(--grid-item-background);
}

Run Pen

This Pen is owned by Kristofer Selbekk on CodePen.

See more by @selbekk on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.