subgrid-2-simplified-broken

by Bacher

HTML

<div class="container">
  <div class="column">
    <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 class="column">
    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4<br />4+</li>
      <li>5</li>
    </ul>
  </div>
  <div class="column">
    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>

CSS

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

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

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