<div class="support">Your browser does not support <code>grid-template-rows: masonry</doce>

</div>

​

<label for="toggle">Enable masonry</label>

<input id="toggle" type="checkbox" checked />

​

<div class="container">

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

​

  <div class="card">

    <div class="img"></div>

    <div class="text"></div>

  </div>

</div>

* {

  box-sizing: border-box;

}

​

body {

  background: #bae6fd;

}

​

.support {

  text-align: center;

  font-size: 3rem;

  border: 5px solid red;

  padding: 10px;

  margin: 10px;

}

​

@supports (grid-template-rows: masonry) {

  .support {

    display: none;

  }

}

​

.container {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));

  gap: 20px;

}

​

label {

  font-size: 2rem;

}

​

input {

  margin-block-end: 30px;

}

​

input:checked + .container {

  grid-template-rows: masonry;

}

​

.card {

  background: #fcd34d;

  padding: 20px;

  inline-size: 340px;

}

​

.card .img {

  block-size: 300px;

  inline-size: 300px;

  background: #f87171;

}

​

.card .text {

  block-size: 30px;

  background: #94a3b8;

  margin: 10px 0;

}

​

.card:nth-child(2n) .text {

  block-size: 90px;

}

​

.card:nth-child(3n) .text {

  block-size: 60px;

}

​

.card:nth-child(5n) .text {

  block-size: 120px;

}

​