<div class="grid">
	<div class="item">
		<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/firefox.png' alt='Firefox logo'>
	</div>
	<div class="item">
		<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/firefox-beta.png' alt='Firefox Beta logo'>
	</div>
	<div class="item">
		<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/firefox-developer.png' alt='Firefox Developer Edition logo'>
	</div>
	<div class="item">
		<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/firefox-nightly.png' alt='Firefox Nightly logo'>
	</div>
</div>
* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

.grid {
	min-height: 100vh;
	
	@media (min-width: 45em) {
		display: grid;
		grid-template-columns: 1fr 0fr 0fr;
		grid-template-rows: repeat(2, 1fr);
		animation: slideIn 2000ms forwards 500ms;
	}
}

.item {
	--i: 0;
	--delay: calc(var(--i) * 600ms);
	grid-area: 1 / 1 / -1 / 2;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: indigo;
	overflow: hidden;
	
	&:first-child,
	&:nth-child(4) {
		img {
			max-width: 20vmax;
		}
	}
	
	&:nth-child(2) {
		--i: 2;
		grid-area: 1 / 2 / 2 / 3;
		background-color: gold;
	}
	
	&:nth-child(3) {
		--i: 2;
		grid-area: 2 / 2 / 3 / 3;
		background-color: turquoise;
	}
	
	&:nth-child(4) {
		--i: 3;
		grid-area: 1 / 3 / -1 / 4;
		background-color: purple;
	}
}

img {
	max-width: 15vmax;
	opacity: 0;
	animation: fadeIn 500ms var(--delay, 0ms) forwards;
	margin: 2rem;
}

@keyframes slideIn {
	50% {
		grid-template-columns: 1fr 1fr 0fr;
	}
	100% {
		grid-template-columns: 1fr 0.75fr 1fr;
	}
}

@keyframes fadeIn {
	100% {
		opacity: 1;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.