Aligning Images and Captions

Grid & subgrid (aligned)

Placeholder 1

The images were far too tall and ended up with an absurd amount of whitespace (highlighting added on hover for demonstration purposes)

Placeholder 2

The images were far too tall and ended up with an absurd amount of whitespace (highlighting added on hover for demonstration purposes)

Placeholder 3

The images were far too tall and ended up with an absurd amount of whitespace (highlighting added on hover for demonstration purposes)

View CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto auto;
}

.grid .link {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

.grid .figure {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}