subgrid-2

by Bacher

HTML

<div class="container">
  <div class="column">
    <div class="header">HEADER</div>
    <div class="content">
      <ul class="list">
        <li>1<br>1+</li>
        <li>2</li>
        <li>3 very long text text text</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
  <div class="column">
    <div class="header">HEADER</div>
    <div class="content">
      <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4<br>4+</li>
        <li>5</li>
      </ul>
    </div>
  </div>
  <div class="column">
    <div class="header">HEADER</div>
    <div class="content">
      <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
</div>

CSS

.container {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  /* grid-auto-columns: 1fr; */
  grid-template-columns: repeat(auto, 1fr);
  padding: 5px;
  background: lightgray;
}

.column {
  display: grid;
  /* grid-row: 1 / 100; */
  grid-template-rows: subgrid;
  background: yellow;
}

.header {
  padding: 5px;
  background: red;
}

.content {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 2 / 9;
  padding: 5px;
  background: lightgreen;
}

.list {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 8;
}