<h1>Creepy Tiles</h1>
<div class="masonry">
	<div><img src='http://www.listchallenges.com/f/lists/d5705f60-9e5f-4a7d-97fa-c0ca5772feb6.jpg' alt /></div>
	<div><img src='http://www.look.com.ua/large/201209/34498.jpg' alt /></div>
	<div><img src='http://crazytattoo.ru/upload/medialibrary/ca1/ca1d6dfc0b42e78e5dccbf1598209701.jpg' alt /></div>
	<div><img src='https://images.stopgame.ru/news/2013/07/22/normal_nBbe2vzXYX2.jpg' alt /></div>
	<div><img src='https://cdn70.picsart.com/190842036002202.jpg?r480x480' alt /></div>
	<div><img src='https://saraflower.files.wordpress.com/2013/11/an_eye_for_horror_by_thenumber23.jpg' alt /></div>
	<div><img src='http://ps3hits.ru/wp-content/uploads/2014/04/568537-1920x1200-1024x640.jpg' alt /></div>
	<div><img src='http://cdn.pastemagazine.com/www/articles/the%20evil%20within%20screenshot.jpg' alt /></div>
	<div><img src='http://www.horrorsurvival.com/wp-content/uploads/2017/05/9ab602d83c113943b9b12b1e0ac5bf4e.jpg' alt /></div>
	<div><img src='http://www.listchallenges.com/f/lists/14dfd4c9-52b3-4b8b-a38d-bd5da7864f1f.jpg' alt /></div>
	<div><img src='http://www.defondos.com/bulkupload/wallpaper-de-horror/Terror/La%20Cara%20de%20Terror_800.jpg' alt /></div>
	<div><img src='https://admitonefilmandtv.files.wordpress.com/2016/01/amity2.jpg?w=1024&h=568&crop=1' alt /></div>
</div>

body {
	margin: 0;
	padding: 0;
	background-image: url(https://circepalace.files.wordpress.com/2016/01/blood_png6119.png);
	background-size: 1920px auto;
	background-position: center top;
}

* {
	box-sizing: border-box;
}


h1 {
	font-family: 'Creepster';
	padding: 2vmin;
	text-align: left;
	font-size: 10vmin;
	color: #000;
	text-shadow: 0 0 3px rgba(0,0,0,.3);
	margin: 10px 0;
}

.masonry {
	padding: 2vmin;
	min-width: 320px;
	display: flex;
	flex-wrap: wrap;
}

.masonry > * {
	flex: 1 1 250px;
	margin: 1vmin;
	max-height: 30vmin;
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	
}

.masonry :nth-child(3n+3) {
	flex-grow: 4;
}

@media screen and (min-width: 640px) {
	.masonry :nth-child(3n+5) {
		flex-grow: 2;
		flex-basis: 20%;
	}
	.masonry :nth-child(3n+4) {
		flex-grow: 2;
		flex-basis: 350px;
	}
	.masonry :nth-last-child(1),
	.masonry :nth-last-child(2) {
		flex-basis: 40%;
	}
}

@supports (display: grid) and (object-fit: cover) {
	.masonry {
		display: grid;
		grid-auto-flow: dense;
		grid-template-columns: repeat(auto-fit,minmax(calc(5rem + 10vmax), max-content));
		grid-gap: 1vmin;
	}
	
	.masonry > * {
		display: initial;
		flex: 1 1 300px;
		margin: initial;
		max-height: initial;
	}
	
	.masonry img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}
	
	.masonry :nth-child(2n+2) {
		grid-row-end: span 1;
	}

	@media screen and (min-width: 640px) {
		.masonry :first-child {
			grid-row-start: span 3;
			grid-column-start: span 3;	
		}
		.masonry :nth-child(2n+3) {
			grid-row-start: span 3;
		}
		.masonry :nth-child(6n+3) {
			grid-row-start: span 2;
		}
	}

	@media screen and (min-width: 960px) {
		.masonry :first-child {
			grid-row-start: span 2;
			grid-column-start: span 2;	
		}
		.masonry :nth-child(8n+9) {
			grid-column-start: span 1;
			grid-row-start: span 3;
		}
		.masonry :nth-child(2n+3) {
			grid-row-start: span 2;
		}
	}
}


/* some effects */
.masonry > * {
	filter: saturate(0);
	transition: 5s filter 1s;
}

.masonry > :hover {
	filter: saturate(1);
	transition: filter .25s;
}


/* for demo */
.masonry.demo > * {
	counter-increment: number;
	position: relative;
}

.masonry.demo > *:after {
	content: counter(number);
	color: #fff;
	position: absolute;
	top: 5px;
	left: 5px;
}

//TODO
//Random parameters for item positions