[!]
[=title "Week 8: Grid 1"]
[=content-]
<p>
Grid is a layout engine like Flexbox, but with a different use case: 2d problems. Rather than
positioning in a single dimension (right/left) like Flexbox, grid allows you to position in 2 dimensions while maintaining many of the same properties.
</p>
<p>
Grids are pretty complicated, and we're going to have at least one entire lecture on them, but we can start now with a very simple use case:
</p>
<pre><code>&lt;style&gt;
#grid {
	display: grid;
	grid-template-columns: 100px auto;
	grid-template-rows: 100px auto;
	height: 500px;
}
&lt;/style&gt;

&lt;div id="grid"&gt;
&lt;span style="background-color: red;"&gt;Square 1&lt;/span&gt;
&lt;span style="background-color: purple"&gt;Square 2&lt;/span&gt;
&lt;span style="background-color: green"&gt;Square 3&lt;/span&gt;
&lt;span style="background-color: blue"&gt;Square 4&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<p>
Which looks like this:
</p>
<style>
#grid {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-rows: 100px 1fr;
	height: 500px;
}
</style>

<div id="grid">
<span style="background-color: red;">Square 1</span>
<span style="background-color: purple">Square 2</span>
<span style="background-color: green">Square 3</span>
<span style="background-color: blue">Square 4</span>
</div>
<p>
	Note something interesting: even though the <code>span</code>s are inline elements, they fill up the whole cells!
	This is because grid cells are their own kind of display, and you can't override them.
</p>
<p>
	The grid is set up by the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties. When not present, their default behavior is
	to evenly space everything and create as many rows/columns as necessary to fit the contents. In this case, each one contains <code>100px 1fr</code>:
	this means "make the first row/column 100px, and make the second row/column fill whatever space is left". (The <code>fr</code> unit is actually
	a lot more complicated than that, but we won't worry about that for now).
</p>
<p>
	I highly recommend playing with this.
</p>
[/]
[#template.html]