css-grid-3/examples/graceful-degradation-example.html

<!DOCTYPE HTML>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<style>
.grid {
  display: inline-grid;
  grid-template-rows: masonry;
  grid-template-columns: 150px 100px 50px;
  gap: 3px;
  padding: 10px;
  border: 3px solid;
  background: lightgrey content-box;
  height: 150px;
  transition: height 6s linear;
}
item {
  display: list-item;
  list-style-type: decimal;
  list-style-position: inside;
  background: grey;
  height: 20px;
  position: relative;
}
item:nth-child(2n) { background:purple; height:auto; }
item:nth-child(1) { border:10px solid; margin: 10px 0 5px 3px; }
z { display: block; background: yellow; height: 20%; width:80%; }
a {
 position: absolute;
 inset: 0;
 top: auto;
 border: 2px solid lime;
}
</style>

<body onload="[...document.querySelectorAll('.grid')].forEach(e=>e.style.height='500px')">
<div class="grid">
  <item></item>
  <item></item>
  <item></item>
  <item style="max-height:40px; margin-top: 10px">40px</item>
  <item></item>
  <item><a></a></item>
  <item></item>
  <item style="writing-mode:vertical-lr">vertical</item>
  <item><a></a></item>
  <item>A<br>B</item>
  <item></item>
  <item><z></z></item>
  <item></item>
  <item><z></z><a></a></item>
  <item></item>
  <item style="align-self:end"></item>
  <item></item>
  <item style="margin:auto 0"></item>
  <item></item>
  <item style="margin-top: auto"></item>
</div><td>