<main class="canvas-container">
<h1>This sorta looks like a standard document already, right?</h1>
<p>Start adding content wherever.</p>
<div class="multicolumn">
<p>We can use layout tools like Flexbox or Grid...</p>
<p>to help us achieve custom layouts, like multiple columns.</p>
</div>
</main>
body {
background: lightgray;
}
.canvas-container {
margin: 0 auto; /* for centering, feel free to use flexbox or some other method*/
box-sizing: border-box;
padding: 0.5in; /* controls margins */
width: 8.5in;
height: 11in;
background-color: white;
box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.7);
}
.multicolumn {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.