subgrid-1

by Bacher

HTML

<div class="container">
  <div class="column">
    <div class="header">HEADER</div>
    <div class="content">CONTENT</div>
  </div>
  <div class="column">
    <div class="header">HEADER</div>
    <div class="content">CONTENT</div>
  </div>
  <div class="column">
    <div class="header">HEADER</div>
    <div class="content">CONTENT</div>
  </div>
  <div class="column">
    <div class="header">HEADER</div>
    <div class="content">CONTENT123 CONTENT 123 ADASDADS</div>
  </div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 200px);
  padding: 5px;
  background: lightgray;
}

.column {
  display: grid;
  grid-row: 1 / 3;
  grid-template-rows: subgrid;
  padding: 5px;
  background: yellow;
}

.header {
  padding: 5px;
  background: red;
  /* grid-row: 1 / 2; */
}

.content {
  /* grid-row: 2 / 3; */
  padding: 5px;
  background: lightgreen;
}