CSS Subgrid

<div class='subgrid-demo-1-container'>
  <div class='grid-1'>
    <div class='title'>Fake title 1 -</div>
    <div class='author'><img alt='portrait raphael glitch' /></div>
    <div class='image'><img alt='arctic portrait'/></div>
    <div class='text'>And now a small fake paragraph...</div>
    <div class='footnotes'>Footnotes about the main article image.</div>
  </div>
  <div class='grid-2'>
    <div class='title'>Fake title 2 -</div>
    <div class='author'><img alt='portrait raphael glitch' /></div>
    <div class='image'><img alt='arctic landscape'/></div>
    <div class='text'>And now a small fake paragraph...</div>
    <div class='footnotes'>Footnotes about the main article image.</div>
  </div>
</div>

.subgrid-demo-1-container,
  .grid-1,
  .grid-2 {
    display: grid;
  }

  .subgrid-demo-1-container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, auto);
    column-gap: 30px;
  }

  .grid-1,
  .grid-2 {
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    column-gap: 15px;
    row-gap: 15px;
    grid-row: 1 / 6;
    grid-template-areas:
      "title title title"
      "author text text"
      "image image image"
      "footnotes footnotes footnotes";
  }

  .grid-1 {
    grid-column: 1/4;
  }

  .grid-2 {
    grid-column: 4 /7;
  }

  .title {
    grid-area: title;
  }

  .image {
    grid-area: image;
  }

  .text {
    grid-area: text;
  }

  .author {
    grid-area: author;
  }

  .footnotes {
    grid-area: footnotes;
  }