<div class="support">Your browser does not support subgrid</div>

<label for="enable-subgrid">With subgrid</label>

<input type="checkbox" id="enable-subgrid" checked>

​

<div class="places">

  <div class="place">

    <h1>Seaside adventures</h1>

    <figure>

      <img src="https://images.unsplash.com/photo-1534166755186-fa2d8a5b2b03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2988&q=80">

      <figcaption>Photo by <a href="https://unsplash.com/@kellydbv?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kelly Dbv</a> on <a href="https://unsplash.com/photos/m3GnbH5afbY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

      </figcaption>

    </figure>

​

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo exercitationem neque magni perferendis alias quas libero rerum assumenda voluptatem voluptatum. Amet, perspiciatis. Optio veniam exercitationem deserunt asperiores deleniti animi quam!</p>

  </div>

  <div class="place">

    <h1>Metropolitan escapade</h1>

    <figure>

      <img src="https://images.unsplash.com/photo-1583422409516-2895a77efded?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80">

      <figcaption>Photo by <a href="https://unsplash.com/@loganstrongarms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Logan Armstrong</a> on <a href="https://unsplash.com/photos/hVhfqhDYciU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

      </figcaption>

    </figure>

​

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo exercitationem neque magni perferendis alias quas libero rerum assumenda voluptatem voluptatum. Amet, perspiciatis. Optio veniam exercitationem deserunt asperiores deleniti animi quam!</p>

  </div>

  <div class="place">

    <h1>Long relaxing hiking in the Swiss Alps</h1>

    <figure>

      <img src="https://images.unsplash.com/photo-1562796374-8bd211f81cbc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80">

      <figcaption>Photo by <a href="https://unsplash.com/@visualrose?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Michael Grant</a> on <a href="https://unsplash.com/photos/1U9oVRBQOnY?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

      </figcaption>

    </figure>

​

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo exercitationem neque magni perferendis alias quas libero rerum assumenda voluptatem voluptatum. Amet, perspiciatis. Optio veniam exercitationem deserunt asperiores deleniti animi quam!</p>

  </div>

</div>

* {

  box-sizing: border-box;

}

​

body {

  background: #f0f9ff;

  font-family: sans-serif;

}

​

.support {

  border: 2px solid red;

  text-align: center;

  padding: 10px;

  font-size: 1.3rem;

}

​

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

  .support {

    display: none;

  }

}

​

input:checked + .places .place {

  grid-template-rows: subgrid;

  grid-row: auto / span 3;

}

​

.places {

  padding: 10px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-auto-rows: auto 1fr auto;

  grid-gap: 20px;

}

​

.place {

  padding: 10px;

  display: grid;

  grid-gap: 0;

  background: #fff;

  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  border-radius: 0.25rem;

}

​

.place figure {

  margin: 0;

}

​

.place figure figcaption {

  text-align: center;

}

​

.place img {

  inline-size: 100%;

}

​

.place h1 {

  text-wrap: balance;

}

​