Use CSS Grid to break out of containers

Using named tracks.

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>
    This is just an element.
  </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: [col1-start] 100px  [col2-start] 1fr  [col3-start] 100px [col3-end];
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.block {
  grid-column: col2-start / col3-start;
  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: col1-start;
  grid-column-end: col3-end;
}