css-grid-2/images/flex-grid-comparison.html

<!DOCTYPE html>
<style>
	div {
		display: flex;
		justify-content: center;
		flex: 1;
	}
	.down {
		flex-flow: column;
	}
	div:empty {
		background: rgba(55%, 55%, 55%, 0.25);
		border: solid;
		padding: 2px;
		margin: 2px;
		border-radius: 4px;
	}
	div:empty::before {
		content: "\00A0";
	}
</style>

<div class="down">
	<div class="across">
		<div></div><div></div><div></div>
	</div>
	<div class="across">
		<div></div><div></div><div></div><div></div><div></div>
	</div>
</div>

<div class="across">
	<div class="down" style="flex: 2">
		<div class="across">
			<div></div><div></div><div></div>
		</div>
		<div class="across">
			<div style="flex: 2; padding-right: 12px"></div><div></div>
		</div>
	</div>
	<div></div>
</div>