<div class="grid">
	<header>
		<h1>Hector’s Adventures with George</h1>
	</header>
	<figure class="fig fig--1" style="--aspect-ratio: 3/4;">
		<img src='https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='Small child playing with toys'>
	</figure>
	<p>We played in Nana and Grandad’s garden. We picked apples and made apple crumble!</p>
	<figure class="fig fig--2" style="--aspect-ratio: 4/3;">
		<img src='https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ'>
	</figure>
	<p>We had a game of football.</p>
	<figure class="fig fig--3" style="--aspect-ratio: 3/4;">
		<img src='https://images.unsplash.com/photo-1472162072942-cd5147eb3902?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='Child reading'>
	</figure>
	<p>We read a funny story together.</p>
</div>
@import url('https://fonts.googleapis.com/css?family=Schoolbell&display=swap');
	
* {
	box-sizing: border-box;
}

body {
	font-family: 'Schoolbell', cursive;
	font-size: 2rem;
	margin: 0;
	padding: 2rem;
}

h1 {
	margin: 0;
	font-size: 3.8rem;
}

figure {
	margin: 0;
	background: rgba(lightBlue, 0.8);
	box-shadow: -0.035rem 0.03rem 0.3rem rgba(0, 0, 0, 0.2);
}

p {
	margin: 0;
	padding: 1.8rem;
	background-color: aliceBlue;
	box-shadow: -0.035rem 0.03rem 0.3rem rgba(0, 0, 0, 0.2);
	z-index: 1;
	position: relative;
}

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

.grid {
	--verticalPadding: 2rem;
	--overlap: 6rem;
	display: grid;
	/* 6/5 grid from my compound grid generator: https://codepen.io/michellebarker/full/zYOMYWv */
	grid-template-columns: 5fr 1fr 4fr 2fr 3fr 3fr 2fr 4fr 1fr 5fr;
	grid-template-rows: 
		[header-start]
		auto
		[fig1-start]
		3rem
		[header-end]
		minmax(var(--verticalPadding), auto)
		[p1-start]
		minmax(0, auto)
		[p1-end]
		minmax(var(--verticalPadding), auto) 
		[fig2-start]
		var(--overlap) 
		[fig1-end]
		minmax(var(--verticalPadding), auto)
		[p2-start]
		minmax(0, auto)
		[p2-end]
		minmax(var(--verticalPadding), auto)
		[fig3-start]
		var(--overlap)
		[fig2-end]
		minmax(var(--verticalPadding), auto)
		[p3-start]
		minmax(0, auto)
		[p3-end]
		minmax(var(--verticalPadding), auto)
		[fig3-end];
	grid-auto-rows: minmax(var(--verticalPadding), auto);
	gap: 1rem;
	max-width: 75rem;
	margin: 0 auto;
	align-items: center;
	background: left top / 40rem no-repeat url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/paint-splatter-1.svg), right bottom / 40rem no-repeat url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/paint-splatter-2.svg);
	
	&::before,
	&::after {
		content: '';
		display: block;
	}
	
	&::before {
		background: left center / 20rem no-repeat url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/paint-splatter-3.svg);
		grid-column: 3 / -3;
		grid-row: 9 / span 4;
		width: 100%;
  	height: 400px;
		position: relative;
 	 z-index: 2;
	}
}

header {
	grid-column: 1 / -2;
	grid-row: header;
	padding: 2rem;
	box-shadow: -0.035rem 0.03rem 0.3rem rgba(0, 0, 0, 0.2);
	z-index: 1;
	text-align: center;
	background-color: aliceBlue;
}

.fig {
	&--1 {
		grid-column: span 5 / -1;
		grid-row: fig1;
	}
	
	&--2 {
		grid-column: 1 / span 7;
		grid-row: fig2;
	}
	
	&--3 {
		grid-column: span 5 / -2;
		grid-row: fig3;
		
		img {
			object-position: left;
		}
	}
}

p {
	&:first-of-type {
		grid-column: 3 / span 4;
		grid-row: p1;
		z-index: 1;
		transform: rotate(-1deg);
	}
	
	&:nth-of-type(2) {
		grid-column: span 3 / -3;
		grid-row: p2;
		transform: rotate(0.8deg);
	}
	
	&:nth-of-type(3) {
		grid-column: 2 / span 4;
		grid-row: p3;
		transform: rotate(-0.7deg);
	}
}

/* Aspect ratio – https://css-tricks.com/aspect-ratio-boxes/ */
[style*="--aspect-ratio"] {
	position: relative;
}

[style*="--aspect-ratio"]::before {
	content: "";
	display: block;
	padding-bottom: calc(100% / (var(--aspect-ratio)));
}  

[style*="--aspect-ratio"] > :first-child {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
} 
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.