<div class="wrapper">
	<header>
		<h1>All fr tracks are not created equal</h1>
		<p>If we change the columns to <code>minmax(0, 1fr)</code> all of our column tracks will be the same size.</p>
	</header>
	<div class="grid">
		<div class="item">
			<h3>1fr</h3>
			<p>A normal grid item</p>
		</div>
		<div class="item">
			<h3>1fr</h3>
			<p>A hdshjekekgigururjggodldjfekeurhghaugsshrhjg grid item</p>
		</div>
		<div class="item">
			<h3>1fr</h3>
			<p>A normal grid item</p>
		</div>
	</div>
</div>

@import url("https://fonts.googleapis.com/css?family=Merriweather:400,400i,700");

* {
	box-sizing: border-box;
}

body {
	font-family: Merriweather, serif;
	margin: 0;
	background-color: #263238;
	color: white;
	display: flex;
	align-items: center;
	min-height: 100vh;
}

header {
	margin-bottom: 2rem;
}

p {
	font-size: 1.1rem;
	line-height: 1.6;
}

img {
	display: block;
	max-width: 100%;
}

.wrapper {
	max-width: 54rem;
	margin: 0 auto;
	padding: 0 2rem;
}

h3 {
	margin: 1rem;
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.item {
	background-color: #F57C00;
	color: #263238;
	
	p {
		padding: 1rem;
	}
}