<div class="gallery">
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1471622710663-8f18c20d6ee3?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=9ae22097a46955fc6b83b80f7a7791ba');"></div>
	<div class="gallery__img gallery__img--tall" style="background-image: url('https://images.unsplash.com/photo-1512938301527-96d6b675c3be?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=dc54c17a44cd6b8303b2909e8c7b5812');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1510094818504-ec6f4d0e011a?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=97f1412e586fec92843400030bb70acc');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1485484979496-9363c53ee97b?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=883d3d4f8f68b02a98c14c04d6def02a');"></div>
	<div class="gallery__img gallery__img--feature-tall" style="background-image: url('https://images.unsplash.com/photo-1516101166879-52f2bd8e3713?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=9e001370455e3a2868381b73eb8d017e');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1422564030440-1ecae6e21f67?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=10e8baec066d6ffaeb0692ec13ae5cd5');"></div>
	<div class="gallery__img gallery__img--tall" style="background-image: url('https://images.unsplash.com/photo-1516558257964-58b552a6e4c5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=59433bd31704b6003e5e3fba97aeef5d');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1503641527561-d776d4deee48?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=d24519251cd77f64317fae203baf3106');"></div>
	<div class="gallery__img gallery__img--wide" style="background-image: url('https://images.unsplash.com/photo-1507295171851-ee18df27c2a2?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=970d03ffd6a36e2d3d0d5192711cd0ac');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1463194537334-3940784aa69a?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e53f3b986364bb4b7cd5cba9f60bf936');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1518050084750-43b2240820d3?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=3a6969c198e53003c68408f41b1369f3');"></div>
	<div class="gallery__img gallery__img--feature" style="background-image: url('https://images.unsplash.com/photo-1471622710663-8f18c20d6ee3?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=9ae22097a46955fc6b83b80f7a7791ba');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1461927757657-7999c8759822?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=d3f9301e9f03385c72f289bbe4a199b0');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1507295171851-ee18df27c2a2?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=970d03ffd6a36e2d3d0d5192711cd0ac');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1422564030440-1ecae6e21f67?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=10e8baec066d6ffaeb0692ec13ae5cd5');"></div>
	<div class="gallery__img gallery__img--wide" style="background-image: url('https://images.unsplash.com/photo-1503641527561-d776d4deee48?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=d24519251cd77f64317fae203baf3106');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1485484979496-9363c53ee97b?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=883d3d4f8f68b02a98c14c04d6def02a');"></div>
	<div class="gallery__img" style="background-image: url('https://images.unsplash.com/photo-1518050084750-43b2240820d3?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=3a6969c198e53003c68408f41b1369f3');"></div>
</div>

<div class="screen-width">Viewport Width: <span class="screen-width-value">1400</span>px</div>

html {
	box-sizing: border-box;
	font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
	font-size: 16px;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

.gallery {
	counter-reset: items;
	display: grid;
	grid-auto-rows: calc(75vw - 2rem); // 4:3 col to row ratio
	grid-gap: 1rem;
	margin: 0 auto;
	max-width: 87.5rem;
	padding: 3rem 1rem;
	
	@media screen and (min-width: 30rem) {
		grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
		grid-auto-rows: 9rem; // 4:3 col to row ratio
		grid-auto-flow: dense;
	}
	@media screen and (min-width: 70rem) {
		grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    	grid-auto-rows: 16.5rem; // 4:3 col to row ratio
	}
	
	&__img {
		align-items: center;
		background-color: #dadada;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50% 50%;
		display: flex;
		justify-content: center;
		
		// Grid cell numbering to show flow.
		&::before {
			color: #dadada;
			counter-increment: items;
  			content: counter(items);
			font-size: 2rem;
			font-weight: 700;
			display: flex;
			background-color: rgba(0,0,0,0.5);
			width: 4rem;
			height: 2em;
			border-radius: 50%;
			align-items: center;
			justify-content: center;
		}
			
		// Expand to 2 columns when `grid-template-columns` 
		// allows for it:
		// (Min col width 13.5rem * 2 cols) 
		// + 1rem gap
		// + (1rem grid element padding * 2) 
		// = 30rem
		@media screen and (min-width: 30rem) {
			
			&--wide {
				grid-column: span 2;
				grid-row: span 2;
			}

			&--tall {
				grid-row: span 2;
			}

			&--feature {
				grid-column: span 2;
				grid-row: span 3;
				
				// Expand to 3 columns when `grid-template-columns` 
				// allows for it:
				// (Min col width 13.5rem * 3 cols) 
				// + (1rem gap * 2) 
				// + (1rem grid element padding * 2) 
				// = 44.5rem
				@media screen and (min-width: 44.5rem) {
					grid-column: span 3;
					grid-row: span 3;
				}
			}

			&--feature-tall {
				grid-column: span 2;
				grid-row: span 3;
			}
		}
	}
}

// Shows viewport width in top right corner.
// Just for demo purposes.
.screen-width {
	color: #999;
	font-size: 0.875rem;
	padding: 1rem;
	position: fixed;
	right: 0;
	top: 0;
}

// Shows viewport width in top right corner.
// Just for demo purposes.
$( window ).resize(function() {
	onWindowResize();
});

onWindowResize();

function onWindowResize() {
	$('.screen-width-value').text($(window).width());	
}