<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>hello, world!</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i">
        <link rel="stylesheet" href="styles/reset.css">
        <link rel="stylesheet" href="styles/debug.css">
		<style>

article {
	display: grid;
	grid-template-columns: 1fr minmax(0, 8.5in) 1fr;
	
	height: 100vh; /* temp fix */
}

article * { grid-column: 2 / 3; }

        </style>
	</head>
    <body>
		<!-- article -->
		<article>
			<p>ARTICLE</p>
		</article>

		<!-- article -->
		<article>
			<p class="debug-center">ARTICLE</p>
		</article>
    </body>
</html>

500i,700,700i,900,900i">

<style>

article {

display: grid;

grid-template-columns: 1fr minmax(0, 8.5in) 1fr;

height: 100vh; /* temp fix */

}

article * { grid-column: 2 / 3; }

</style>

</head>

<body>

<p>ARTICLE</p>

</article>

<p class="debug-center">ARTICLE</p>

</article>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>hello, world!</title>

-3:34