Layouts & positioning > Grid Layout

Grid Layout example 1

Example code

							<div class="grid-container">
  <main>
	  <h1>Hello world!</h1>
		<p>This is a demo of a simple 
		grid with three columns that 
		content flows into.</p>
		<p>The first column is 
		intentionally left blank.</p>
		<p>Use the browser developer 
		tools to figure out what's 
		happening.</p>
	</main>
	<aside>
	  <p>Copyright 2026</p>
	</aside>
</div>

<style>
  .grid-container {
		display: grid;
		grid-template-columns: 
			1fr 2fr 1fr;
			border: 1px red dotted;
	}
	main {
	  grid-column: 2 / 3;
	}
	aside {
		grid-column: 3 / 4;
		align-content: end;
		text-align: right;
		font-size: 80%;
	}
	blockquote::before {
		content: "“";
	}
	blockquote::after {
		content: "”";
	}
</style>