<main class="comic">
	<div class="panelgroup-1">
		<div class="panel-1">
			<img src='https://images.unsplash.com/photo-1455145914126-c357157e2db0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-2">
			<img src='https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-3">
			<img src='https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-4">
			<img src='https://images.unsplash.com/photo-1507984211203-76701d7bb120?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-5">
			<img src='https://images.unsplash.com/photo-1500259571355-332da5cb07aa?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-6">
			<img src='https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
	</div>
	<div class="panelgroup-2">
		<div class="panel-7">
			<img src='https://images.unsplash.com/photo-1542736143-29a8432162bc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-8">
			<img src='https://images.unsplash.com/photo-1508927415581-538b97647924?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-9">
			<img src='https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-10">
			<img src='https://images.unsplash.com/photo-1531425300797-d5dc8b021c84?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-11">
			<img src='https://images.unsplash.com/photo-1447969025943-8219c41ea47a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-12">
			<img src='https://images.unsplash.com/photo-1502083896352-259ab9e342d7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
		</div>
		<div class="panel-13"></div>
	</div>
</main>

<a class="collection" href="https://codepen.io/collection/DjwRaP/" target="_blank">comic layout collection</a>
.comic {
	display: grid;
	grid-template-rows: 0.35fr 0.35fr 0.3fr;
	margin: 0 auto;
}

[class^=panel-] {
	background-color: #fff;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.panelgroup-1 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-row: 1 / span 2;
	grid-column: 1;
}

.panel-1 {
	grid-row: 1;
	grid-column: 1 / span 2;
	clip-path: polygon(0 0, 50% 0, 60.00% 100.00%, 0 100%);
	
	img {
		clip-path: polygon(0 0, 48% 0, 57% 100%, 0 100%);
	}
}

.panel-2 {
	grid-row: 1;
	grid-column: 2 / span 2;
	clip-path: polygon(0 0, 50% 0, 58% 100%, 10% 100%);
	z-index: 1;
	
	img {
		clip-path: polygon(0 0, 48.5% 0, 56% 100%, 10% 100%);
	}
}

.panel-3 {
	grid-row: 1;
	grid-column: 3;
	
	img {
		clip-path: polygon(0 0, 97% 0, 66% 100%, 0 100%);
	}
}

.panel-4 {
	grid-row: 1;
	grid-column: 3 / 5;
	clip-path: polygon(101px 0, 200px 0, 200px 493px, 71px 493px);
	
	img {
		clip-path: polygon(101px 0, 192px 0, 145px 494px, 71px 493px);
	}
}

.panel-5 {
	grid-row: 1;
	grid-column: 4 / -1;
	clip-path: polygon(48% 0, 100% 0, 100% 100%, 25% 100%);
}

.panel-6 {
	grid-row: 1;
	grid-column: 5;
	clip-path: polygon(100% 37%, 100% 100%, 16% 100%);
}

.panelgroup-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 1.4fr 0.8fr 1fr 1.7fr;
	grid-template-rows: 2.5fr repeat(2, 1fr) 1.6fr;
	grid-row: 2 / span 2;
	grid-column: 1;
	z-index: 3;
}

.panel-7 {
	grid-row: 1 / -1;
	grid-column: 1 / -1;
	clip-path: ellipse(360px 370px at 340px 372px);
	
	img {
		clip-path: ellipse(354px 364px at 340px 372px);
	}
}

.panel-8 {
	grid-row: 1 / -1;
	grid-column: 2 / -1;
	clip-path: ellipse(271px 279px at 273px 410px);
	
	img {
		clip-path: ellipse(267px 275px at 273px 410px);
	}
}

.panel-9 {
	grid-row: 2 / -1;
	grid-column: 3 / -1;
	clip-path: ellipse(250px 213px at 251px 215px);
	
	img {
		clip-path: ellipse(246px 209px at 251px 215px);
	}
}

.panel-10 {
	grid-row: 3 / -1;
	grid-column: 4 / -1;
	clip-path: ellipse(176px 159px at 177px 161px);
	
	img {
		clip-path: ellipse(172px 155px at 177px 161px);
	}
}

.panel-11 {
	grid-row: 4 / -1;
	grid-column: 5 / -1;
	clip-path: ellipse(112px 92px at 114px 96px);
	
	img {
		clip-path: ellipse(108px 88px at 114px 96px);
	}
}

.panel-12 {
	grid-row: 4 / -1;
	grid-column: 6 / -1;
	clip-path: circle(80px at 82px 100px);
	
	img {
		clip-path: circle(76px at 82px 100px);
	}
}

.panel-13 {
	grid-row: 4 / -1;
	grid-column: 6 / -1;
	clip-path: circle(61px at 109px 106px);
	background-color: white;
}

// Themeing

body {
	background-color: #333745;
	display: grid;
	place-items: start center;
	grid-template-rows: max-content auto;
	gap: 1rem;
	height: 100vh;
}

.comic {
	width: 500px;
	height: 705px;
	padding: 1rem;
	margin: 2rem 0;
	background-color: #fff;
	box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.2);
}

.collection {
	position: absolute;
	display: block;
	padding: 0.5rem 1rem;
	border: 1px solid #F07739;
	left: 10px;
	top: 10px;
	color: #F07739;
	text-decoration: none;
	font-weight: 700;
	
	&:hover {
		background-color: #F07739;
		color: #333745;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.