<div id="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div id="subgrid">
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
    <div class="subitem"></div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
/*  Note:
  As of July 16, 2019, this only works in Firefox Nightly.

  This is an example of what subgrid might look like
  according to the Working Draft of CSS Grid Layout Module
  Level 2, and hopefully this pen will just start working
  once Grid Level 2 is implemented by browsers.
*/

* { box-sizing: border-box; }
html, body { background: #557; }

#parent {
    height: calc(100vh - 4rem);
    max-width: 1024px;
    margin: 2rem auto;
    outline: 3px solid #111;
    background: #333;
  
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 2fr 1fr;
    grid-template-rows: 1fr 2fr 2fr 1fr;
  
    padding: 1rem;
    grid-gap: 1rem;
}
#parent > div {
  outline: 4px solid #111;
  background: #557;
}
#subgrid {
    grid-column: 2 / 5;
    grid-row: 2 / 4;

    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(3, 1fr);
  
    padding: 0.5rem;
    grid-gap: 0.5rem;
}

.subitem {
  outline: 3px solid #999;
  background: #ccc;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.