Content-first layout

by phloe

HTML

<div class="grid">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue risus lectus, ut elementum mi tempus at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pharetra urna eros, vel convallis urna euismod a. Sed accumsan libero id lectus sagittis, sed ullamcorper eros pellentesque.</p>
</div>
<div class="block block--large">
<p>Donec vitae finibus sapien. Suspendisse sed tellus imperdiet, tincidunt libero id, faucibus orci. In eget quam eu dui laoreet dapibus. Nulla quis mauris dignissim, tincidunt nibh nec, facilisis velit. Donec a maximus sapien. Quisque nec fermentum tellus. Fusce aliquam rhoncus est facilisis maximus. Duis metus dui, ultricies tincidunt erat non, tincidunt finibus leo.</p>
</div>
</div>

CSS

@font-face {
	font-family: Gibson;
	src: url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.woff2") format("woff2");
	font-weight: normal;
}

* {
	padding: 0;
	margin: 0;
	font-family: Gibson;
}

p + p {
	padding-top: 20px;
}


.block + .block {
	margin-top: 20px;
}

.block {
	grid-column: span 1;
}


.block--large {
	font-size: 1.61803398875em;
	grid-column: span 2;
}

.grid {
	margin: 20px;
}

@supports (display: grid) {
	@media (min-width: 20em) {
		.block + .block {
			margin-top: 0;
		}
		.grid {
			display: grid;
			grid-template-columns: 1fr 0.61803fr 1fr;
			_grid-template-columns: repeat(auto-fill, minmax(calc(20em - 20px), 1fr));
			gap: 20px;
		}
	}
}