<div class="grid-gallery active">
  <img width="413" height="270" src="http://placekitten.com/g/413/270">				
  <img width="230" height="200" src="http://placekitten.com/g/230/200">
  <img width="173" height="153" src="http://placekitten.com/g/173/153">
  <img width="173" height="440" src="http://placekitten.com/g/173/440">
  <img width="359" height="235" src="http://placekitten.com/g/359/235">
  <img width="175" height="125" src="http://placekitten.com/g/175/125">
  <img width="175" height="125" src="http://placekitten.com/g/175/125">
  <img width="359" height="125" src="http://placekitten.com/g/359/125">
  <img width="173" height="328" src="http://placekitten.com/g/173/328">
  <img width="116" height="104" src="http://placekitten.com/g/116/104">
  <img width="116" height="104" src="http://placekitten.com/g/116/104">
  <img width="242" height="210" src="http://placekitten.com/g/242/210">
</div>
* {
  box-sizing: border-box;
}

.grid-gallery {
	column-gap: .7%;
	display: grid;	
	grid-template-columns: 16.42% 12.35% 12.35% 12.5% 12.5% 12.35% 8.28% 8.28%; /*230px 173px 173px 175px 175px 173px 116px 116px*/
	grid-template-rows: 1fr .07fr .12fr .44fr .638fr;
	grid-gap: 10px;
	grid-column-gap: .7%;
	left: 50%;
	margin: 100px -50vw 0;
	position: relative;
	right: 50%;
	width: 100vw;
}

.grid-gallery img {
	border-radius: 4px;
  height: auto;
	width: 100%;
}

.grid-gallery img:nth-of-type(1) {
	grid-column: 1 / span 2;
	grid-row: 1 / span 3;
}

.grid-gallery img:nth-of-type(2) {
	grid-column: 1;
	grid-row: 4 / span 2;
}

.grid-gallery img:nth-of-type(3) {
	grid-column: 2;
	grid-row: 4 / span 2;
}

.grid-gallery img:nth-of-type(4) {
	align-self: end;
	grid-column: 3;
	grid-row: 1 / span 5;
}

.grid-gallery img:nth-of-type(5) {
	grid-column: 4 / span 2;
	grid-row: 1 / span 2;
}

.grid-gallery img:nth-of-type(6) {
	grid-column: 4;
	grid-row: 3 / span 2;
}

.grid-gallery img:nth-of-type(7) {
	grid-column: 5;
	grid-row: 3 / span 2;
}

.grid-gallery img:nth-of-type(8) {
	grid-column: 4 / span 2;
	grid-row: 5;
}

.grid-gallery img:nth-of-type(9) {
	align-self: center;
	grid-column: 6;
	grid-row: 1 / span 5;
}

.grid-gallery img:nth-of-type(10) {
	align-self: end;
	grid-column: 7;
	grid-row: 1;
}

.grid-gallery img:nth-of-type(11) {
	align-self: end;
	grid-column: 8;
	grid-row: 1;
}

.grid-gallery img:nth-of-type(12) {
	grid-column: 7 / span 2;
	grid-row: 2 / span 4;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.