Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>The Fire Emoji: A Brief Survey (A Slotted Content Demo)</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <style>
    .zg-body {
      background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/fire-emoji%2Fcartographer.png?alt=media&token=ea48c8dd-2d9a-4365-b54e-564b6ac8a0e8');
      padding: 80px;
    }

    zing-grid {
      max-width: 600px;
      margin: 0 auto;
      font-size: 12px;
      border: 0;
      background: none;
      --theme-color-primary: #E57E4C;
    }

    zg-caption {
      padding: 20px;
      background: #f12711;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #f5af19, #f12711);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #f5af19, #f12711);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border: 0;
    }

    zg-caption h1 {
      font-size: 25px;
      margin: 0;
    }

    zg-caption h2 {
      font-size: 15px;
      font-weight: normal;
      margin: 0;
    }

    zg-caption {
      padding: 20px;
      background: #f12711;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #f5af19, #f12711);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #f5af19, #f12711);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border: 0;
    }

    zing-grid zing-grid zg-caption {
      background: #f12711;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #f5af19, #f12711);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #f5af19, #f12711);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      border-radius: 6px 6px 0 0;
      -webkit-border-radius: 6px 6px 0 0;
      -moz-border-radius: 6px 6px 0 0;
      border: 0;
      padding: 5px;
      height: 40px;
    }

    zing-grid zing-grid zg-caption h1 {
      font-size: 13px;
      margin-top: -25px;
    }

    zg-head-cell {
      font-size: 12px;
      padding: 0;
      background: none;
    }

    zing-grid zing-grid zg-head {
      border-bottom: none;
      background: none;
    }

    zing-grid zing-grid zg-head-cell {
      font-size: 11px;
      padding-left: 10px;
      background: #3d3c3c;
      color: #ffffff;
      height: 30px;
      margin-bottom: -10px;
    }

    zing-grid[layout="row"] zg-head zg-row {
      background: none;
      margin-bottom: -5px;
    }

    zg-cell {
      padding: 8px;
      overflow: visible;
    }

    zg-body[layout="card"] {
      --zg-card-columns: 33.3%;
      background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/fire-emoji%2Fcartographer.png?alt=media&token=ea48c8dd-2d9a-4365-b54e-564b6ac8a0e8');
      padding: 10px 0;
    }

    zg-body[layout="card"] zg-row {
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border: 0;
      align-content: flex-start;
      margin-bottom: 10px;
    }

    zg-body[layout="card"] zg-row zg-cell {
      border: none;
    }

    .brand-name {
      font-size: 22px;
      margin: -2px 0 -10px 0;
      color: #d82e08;
    }

    zing-grid zing-grid zg-column:first-child {
      width: 60%;
    }

    .zg-body img {
      margin: 0 auto;
    }

    zg-column[layout="row"] {
      width: 50%;
    }

    zing-grid[layout="row"] {
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      font-size: 10px;
      background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
      border: none;
    }

    zg-body[layout="row"] zg-row {
      border-bottom: 1px solid #ddd;
      height: 25px;
    }

    zg-body[layout="row"] zg-row:last-child {
      border-bottom: 0;
    }

    [viewport="mobile"] zg-body[layout="card"] {
      --zg-card-columns: 100% !important;
    }

    [viewport="mobile"] zg-cell:not([data-field-index="pastVersions"])>img {
      width: 150px !important;
      max-width: 150px !important;
    }

    zing-grid:first-of-type [viewport="mobile"] div[data-field-index="emojiImg"] {
      margin-left: calc(50% - 50px);
    }

    zg-footer {
      display: flex;
      color: #ffffff;
      justify-content: space-between;
      padding: 10px 20px;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border: 0;
      background: #f12711;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #f5af19, #f12711);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #f5af19, #f12711);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    zg-footer a {
      font-weight: bold;
      color: #ffffff;
    }

    zing-grid zing-grid zg-footer {
      display: none;
    }

    zing-grid[loading] {
      height: 4365px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid src="https://zinggrid-examples.firebaseio.com/fire-emojis" layout="card" layout-controls="disabled" gridlines="both">
    <zg-caption>
      <h1><i class="fas fa-fire-alt"></i> Fire Emoji Survey</h1>
      <h2>A ZingGrid demo with slotted content and gridlines</h2>
    </zg-caption>
    <zg-colgroup>
      <zg-column index="company" header="Brand">
        <h2 class="brand-name">[[index.company]]</h2>
      </zg-column>
      <zg-column type="image" index="emojiImg" header=" "></zg-column>
      <zg-column index="pastVersions" header=" " renderer="_renderInnerGrid" width="100%">
        <template>
          <zing-grid layout="row" layout-controls="disabled">
            <zg-caption>
              <h1>Past Versions</h1>
            </zg-caption>
            <zg-colgroup>
              <zg-column index="os" header="Release"></zg-column>
              <zg-column index="emojiImg" header="Emoji" type="image"></zg-column>
            </zg-colgroup>
          </zing-grid>
        </template>
      </zg-column>
    </zg-colgroup>
    <zg-footer>
      <p>Source: <a href="https://emojipedia.org/fire/" target="_blank">Emojipedia</a></p>
      <p>Powered by <a href="https://www.zinggrid.com" target="_blank">ZingGrid</a></p>
    </zg-footer>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // global function declaration
    function _renderInnerGrid(pastVersions, cellRef, $cell) {
      cellRef.querySelector('zing-grid').setData(pastVersions);
    }
  </script>
</body>

</html>