JSFiddle - React, Tailwind, and code Playground

by itslaura

HTML

<div class="container">
<div class="grid-wrapper">

  <div class="wide">
    <a class="img-thumbnail-variant-1" href="https://www.facebook.com">
      <img src="https://bootstrapious.com/i/snippets/sn-gallery/img-2.jpg" alt="" />
      <div class="caption">
        <span class="icon icon-lg fa-facebook"></span>
      </div>
    </a>
  </div>

  <div class="big">
    <a class="img-thumbnail-variant-1" href="https://www.facebook.com">
      <img src="https://bootstrapious.com/i/snippets/sn-gallery/img-3.jpg" alt="" />
      <div class="caption">
        <span class="icon icon-lg fa-facebook"></span>
      </div>
    </a>
  </div>
  
  
  <div class="tall">
		<a class="img-thumbnail-variant-1" href="https://www.facebook.com">
		<img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="masonrygallery"/>
		<div class="caption"><span class="icon icon-lg fa-facebook"></span></div></a>
	</div>
				  
	<div>
		<a class="img-thumbnail-variant-1" href="https://www.facebook.com">
		<img src="https://bootstrapious.com/i/snippets/sn-gallery/img-4.jpg" alt="" class="masonrygallery"/>
		<div class="caption"><span class="icon icon-lg fa-facebook"></span></div></a>
	</div>
			  
	<div>
		<a class="img-thumbnail-variant-1" href="https://www.facebook.com">
		<img src="https://bootstrapious.com/i/snippets/sn-gallery/img-5.jpg" alt="" />
		<div class="caption"><span class="icon icon-lg fa-facebook"></span></div></a>
	</div>
			
	<div>
		<a class="img-thumbnail-variant-1" href="https://www.facebook.com">
		<img src="https://bootstrapious.com/i/snippets/sn-gallery/img-6.jpg" alt="" />
		<div class="caption"><span class="icon icon-lg fa-facebook"></span></div></a>
	</div>
			
	<div class="wide">
		<a class="img-thumbnail-variant-1" href="https://www.facebook.com">
		<img src="https://bootstrapious.com/i/snippets/sn-gallery/img-7.jpg" alt="" />
		<div class="caption"><span class="icon icon-lg fa-facebook"></span></div></a>
	</div>
		
	<div class="wide">
		<a...

CSS

.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}



.grid-wrapper>div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.grid-wrapper>div>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.grid-wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 300px;
  grid-auto-flow: dense;
}

.grid-wrapper .wide {
  grid-column: span 2;
}

.grid-wrapper .tall {
  grid-row: span 2;
}

.grid-wrapper .big {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-wrapper .triple {
  grid-column: span 2;
  grid-row: span 3;
}

.grid-wrapper .extratall {
  grid-column: span 3;
  grid-row: span 2;
}

.img-thumbnail-variant-1 {
	display: block;
	position: relative;
}

.img-thumbnail-variant-1 .caption {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(21, 21, 21, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.8);
	transition: 350ms ease-in-out;
	color: #fff;
}

.img-thumbnail-variant-1:hover .caption {
	opacity: 1;
	transform: scale(1);
}