Use CSS Grid to break out of containers

by bejnar

HTML

<div class="grid">
  <div class="block"><p class="block-child">A</p></div>
  <div class="block"><p class="block-child">B</p></div>
  <div class="block"><p class="block-child">C</p></div>
  <p>
    Just a random paragraph
  </p>
  <div class="break-out-block">
    This block should break out
    <div class="block">
      <p class="block-child">
        This is a child block. 
        Question: can it break out into the main grid? 
        A: Yes, if the parent does the same.
      </p>
    </div>
  </div>

</div>

SCSS

.grid {
  display: grid;
  grid-template-columns: 10% repeat(10, 1fr) 10%;
  
  grid-template-areas: 'l c c c c c c c c c c r';
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.grid > * {
  grid-column-start: 2;
  grid-column-end: 12;
}


.block {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
}

.block-child {
  padding: 20px;
  margin: 0;
}

.break-out-block {
  background-color: yellow;
  padding: 5px;
  grid-column-start: 1;
  grid-column-end: 13;
}