<main class="container">  
  <article class="card">
    <img src="https://picsum.photos/id/1015/300/200">
    <h3>Awesome place</h3>
    <p>This is an experiment on CSS subgrid and as such it only works in Firefox 71 at the moment. Code simplicity has been prioritised. For production code, consider at least some sort of CSS architecture and give the html some work to prevent a11y issues </p>
    <button> more info </button>
  </article>
  
  <article class="card">
    <img src="https://picsum.photos/id/1016/300/200">
    <h3>Much dryer, still awesome place</h3>
    <p>Can I lorem this? Of course I can. 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat quas tenetur perspiciatis iure ipsum</p>
    <button> more info </button>
  </article>
 
    <article class="card">
    <img src="https://picsum.photos/id/1018/300/200">
    <h3>The grass is greener</h3>
    <p>but the description is shorter..</p>
    <button> more info </button>
  </article>
</main>
.container{
  display:grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-gap: 20px;
}

.card{
  max-width: 300px;
  display: grid;
  grid-gap: inherit;
  align-content: start;

}

@supports (grid-template-rows: subgrid){
  .container{
    /* declare the rows for the container*/
    grid-template-rows: repeat(4, auto);  
  }
  
  .card{
    /* gets the element to span all rows, to prevent overlapping */
    grid-row: span 4;
    /* sets the card row tracks to depend on the parent*/
    grid-template-rows: subgrid;
  }
}

/* easthetic styles, not related to the subgrid stuff */
body{
  background-color: wheat;
  font-family: sans-serif;
  display: flex;
  justify-content:center;
}

.container{
  margin: 40px 20px;
  justify-content: center;
}

.card{
  background: white;
  box-shadow: 0 0 10px;
  border-radius: 15px;
  overflow: hidden;
  padding-bottom: 20px;
}


img{
  max-width: 100%;
}

h3{
  margin:0 auto 0 auto;
  padding: 0 15px;
}

p{
  margin: 1rem 20px;
}

button{
  margin: auto;
  border: 2px solid transparent;
  background-color: teal;
  color: white;
  padding: 10px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.