Aspect-ratio Practice


by Jeremy Caudle
notes

After listening to Jen Simmons talk to Chris Coyier and Dave Rupert about aspect-ration on ShopTalk Show episode 415, I really wanted to give it a try. It sounds great, but I sadly discovered it's mainly supported in Chrome Canary at the moment. Firefox, Chrome, and Edge currently have internal mapping of width and height.

Aspect-Ratio

I just spent the last hour testing out the aspect-ratio property before I realized, thanks to the this article on the topic from CSS tricks, that it only really works in Chrome Canary right now. So I'm switching this practice to using aspect-ratio within a media query. Resize your browser window to change its aspect-ratio to see the layout change. Try to get a 16/9 ratio, 3/2 ratio, and 1/1 ratio.

View the code:

HTML and JS 
<div class="codedoodle-block">

        <h1>Aspect-Ratio</h1>

        <div class="text">
            <p>I just spent the last hour testing out the aspect-ratio property before I realized, thanks to the <a href="https://css-tricks.com/a-first-look-at-aspect-ratio/">this article on the topic from CSS tricks</a>, that it only really works in Chrome Canary right now. So I'm switching this practice to using aspect-ratio within a media query. <strong>Resize your browser window to change its aspect-ratio to see the layout change. Try to get a 16/9 ratio, 3/2 ratio, and 1/1 ratio.</strong></p>
        </div>
        
    </div>
CSS 
/* Code Block styles */

div.codedoodle-block {
	margin:0;
	width: auto;
	background-color: transparent;
}

div.codedoodle-block h1 {
	text-align: center;
	padding: 1rem 0;
	font-family: 'Helvetica', 'Segoe UI', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 3em;
	margin: 0 auto 1rem auto;
}

@supports (display: grid) {

	div.codedoodle-block {
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}

	div.codedoodle-block h1 {
		grid-column: 1 / 6;
		grid-row: 1 / 2;
	}

}

.text {
	max-width: 60em;
	grid-column: 2 / 5;
}


@media (min-aspect-ratio: 16/9) {

	div.codedoodle-block {
		background-color: rgba(0, 0, 255, 0.1);
		min-height: 75vh;
	}

	div.codedoodle-block h1 {
		writing-mode:vertical-lr;
		grid-column: 1 / 2;
		grid-row: 1 / 3;
		font-size: 5vw;
	}

	.text {
		grid-column: 2 / 4;
		grid-row: 2 / 3;
		font-size: 1.25em;
	}

}

@media (max-aspect-ratio: 3/2) {

	div.codedoodle-block {
		background-color: rgba(0, 255, 255, 0.1);
	}

	.text {
		grid-column: 3 / 5;
	}

}

@media (aspect-ratio: 1/1) {

	div.codedoodle-block {
		background-color: rgba(255, 0, 255, 1);
		min-height: 95vh;
	}

	div.codedoodle-block h1 {
		color: rgba(255, 255, 255, 0.8);
	}

	.text {
		grid-column: 2 / 5;
	}

}

Tags