Safari bug with CSS Grid, display: contents & ::before/::after

index.html

<div class="grid">
  <div class="replaced"></div>
  <span class="green"></span>
  <span class="red"></span>
</div>

safari-bug-with-css-grid-display-contents-before-after.markdown

Safari bug with CSS Grid, display: contents & ::before/::after

A Pen by Michał Gołębiowski on CodePen.

License.

style.css

.grid {
  display: grid;
  grid-template-columns: repeat(4, 150px);
}

.replaced {
  display: contents;
}

.replaced::before, .replaced::after, .green, .red {
  content: "";
  width: 100px;
  height: 100px;
}

.replaced::before, .green {
  background-color: green;
}

.replaced::after, .red {
  background-color: red;
}