Golden Ratio Layout using CSS Grids

golden-ratio-layout-using-css-grids.markdown

Golden Ratio Layout using CSS Grids

A golden ration layout using CSS Grids, variables, vw units, calc, flexbox, hyphenation and Sass.

A Pen by Dudley Storey on CodePen.

License.

index.html

<main>
	<div id="illustration">
	</div>
	<div id="caption">
		<p>While they may look like plants, sea anemones are sea-dwelling animals, named after the <em>anemone</em> flower. Sea anemones are related to corals, jellyfish and hydra.</p>
<p>The rapidly expanding global trade in anemones as ornamentals for aquariums threatens native populations, as the animals grow and reproduce very slowly.</p>
	</div>
	<div id="copyright">
		<p>Photograph by <a href="https://www.flickr.com/photos/shekgraham/241972255/">Shek Graham</a>, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license.</p>
	</div> 
</main>

style.scss

:root {
	--phi: 1.618;
	--width: 80vw;
	--height: calc(var(--width) / var(--phi));
	--fontSize: 1.2vw;
	@media all and (max-width: 1300px) {
		--fontSize: 1.3vw;
	}
	@media all and (max-width: 1100px) {
		--width: 100vw;
		--fontSize: 1.1rem;
	}
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	@media all and (max-width: 900px) {
		display: block;
	}
}
a {
	color: currentColor;
	text-decoration: none;
	border-bottom: 1px solid #aaa;
}
main {
	background: #000;
	font-family: Avenir, sans-serif;
	width: var(--width);
	height: var(--height);
	margin: 0 auto;
	display: grid;
	grid-template-rows: calc(var(--height) / var(--phi));
	grid-template-columns: calc(var(--width) / var(--phi));
	word-break: break-word;
	-ms-word-break: break-all;
  	-ms-hyphens: auto; 
  	-moz-hyphens: auto;
  	-webkit-hyphens: auto;
  	hyphens: auto; 
	@media all and (max-width: 900px) {
		display: block;
	}
}
#illustration {
	grid-row-start: 1;
	grid-row-end: 3;
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sea-anemone-physobrachia.jpg);
	background-size: cover;
	@media all and (max-width: 900px) {
		height: calc(var(--width) / var(--phi));
	}
}
#caption {
	grid-row-start: 1;
	grid-row-end: 2;
	background: #000;
}
#caption, #copyright {
	padding: 2rem;
	line-height: 1.6;
	color: #fff;
	font-size: var(--fontSize);
		p {
			margin-top: 0;
		}
}
#copyright {
	background: hsl(240,50%,30%);
}

.