<section class="showcase view-gallery">
	<div class="showcase__header">
		<h1 class="title">Showcase</h1>
		<button class="btn is-active"><span class="material-icons">view_comfy</span></button>
		<!--<button class="btn"><span class="material-icons">view_quilt</span></button>-->
		<button class="btn"><span class="material-icons">view_headline</span></button>
	</div>
  
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/600x400">
		<figcaption>In odio debitis ipsam nemo.</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/603x402">
		<figcaption>Lorem ipsum dolor sit amet.</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/606x404">
		<figcaption>Dolor nostrum blanditiis ea porro.</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/609x406">
		<figcaption>Aut sunt ex deleniti quisquam!</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/612x408">
		<figcaption>Dicta reprehenderit et optio omnis.</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/615x410">
		<figcaption>Corrupti placeat maxime cupiditate tempora.</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/618x412">
		<figcaption>Dolore ipsum ut in nostrum.</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/621x414">
		<figcaption>Porro assumenda officiis modi optio!</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/624x416">
		<figcaption>Quas provident impedit hic debitis!</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/627x418">
		<figcaption>Maxime soluta minima voluptates sunt.</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/630x420">
		<figcaption>Commodi quos eligendi veritatis obcaecati.</figcaption>
	</figure>
	<figure>
		<img src="https://source.unsplash.com/user/mkmllr/likes/633x422">
		<figcaption>Itaque maiores enim cumque ullam!</figcaption>
	</figure>
</section>
// ----- base ----- //

* {
	box-sizing: border-box;
}

html {
	font-family: Roboto, sans-serif;
	@include font-size-between(16px, 20px, 600px, 1200px);
	text-size-adjust: none;
}

body {
	margin: 0;
	background: #ececef;
}

img {
	display: block;
	max-width: 100%;
}

figure {
	margin: 0;
}


// ----- showcase ----- //

.showcase {
	$this: &;
	display: grid;
	grid-gap: 2em;
	padding: 2em;

	figure {
		border-radius: .25em;
		background: #fff;
		box-shadow: 0 .5em 2em -1em rgba(#000, .25);
		overflow: hidden;

		img {
			width: 100%;
		}

		figcaption {
			padding: 1em;
		}
	}

	
	// ----- gallery view ----- //
	
	&.view-gallery {
		$item-min-width: 300px;
		grid-template-columns: repeat(auto-fit, minmax($item-min-width, 1fr));

		@media (max-width: $item-min-width*2.5) {
			grid-template-columns: 1fr 1fr;
		}
		
		@media (max-width: $item-min-width*1.5) {
			grid-template-columns: 1fr;
		}

		#{$this}__header {
			grid-column: 1 / -1;
		}
	}

	
	// ----- list view ----- //
	
	&.view-list {
		grid-auto-flow: row;
		max-width: 80ch;
		margin: 0 auto;
	}

	
	// ----- navigation ----- //
	
	&__header {
		display: grid;
		grid-template-columns: 1fr repeat(2, auto);
		grid-gap: 1em;
		align-items: center;

		.title {
			margin: 0;
			font-size: 1.25em;
			font-weight: 700;
		}

		.btn {
			all: unset;
			display: flex;
			align-items: center;
			padding: .5em;
			border-radius: .25em;
			background: #fff;
			box-shadow: 0 2px 5px -3px rgba(#000, .5);
			cursor: pointer;
			
			.material-icons {
				color: inherit;
			}

			&.is-active {
				background: rgba(#000, .5);
				color: #fff;
			}
		}
	}
}
View Compiled
const buttons = document.querySelectorAll('.showcase__header .btn');
const showcase = document.querySelector('.showcase');

buttons.forEach(button => {
	button.addEventListener('click', changeView);
});

function changeView(e) {
	let isActiveClass = 'is-active',
			galleryClass = 'view-gallery',
			listClass = 'view-list',
			current = e.currentTarget,
			siblings = [...buttons].filter(s => s != current),
			isCurrentActive = current.classList.contains(isActiveClass);
	
	current.classList.add(isActiveClass);
	siblings.map(s => {
		s.classList.remove(isActiveClass);
	});

	if (!isCurrentActive) {
		if (showcase.classList.contains(galleryClass)) {
			showcase.classList.remove(galleryClass);
			showcase.classList.add(listClass);
		}
		else if (showcase.classList.contains(listClass)) {
			showcase.classList.remove(listClass);
			showcase.classList.add(galleryClass);
		}
	}
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700|Material+Icons
  2. https://codepen.io/mkmueller/pen/WKZraw.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.