clarkeis.com/site/introwebdev/week-9-grid-2.html

[!]
[=title "Week 9: Grid 2"]
[=content-]
<p>
	We briefly discussed grids already - we're going to go into more detail on them now.
	If you haven't, read <a href="week-8-grid-1.html">Grid 1</a>, or you will be very confused.
</p>
<p>
	Note: because this is an incredibly dense bit, there aren't many demos. I highly recommend reading
	through <a href="https://css-tricks.com/complete-guide-css-grid-layout/">CSS Grid Layout Guide</a> by CSS-Tricks -
	it's far more interactive and detailed.
</p>
<h1>Grid-Template-*</h1>
<p>
	We've already seen the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties:
	they define the widths of the columns of the grid and the rows of the grid. We're going to go into more detail on how they work now.
</p>
<p>
	First off, the syntax: every use of either property looks like <code>grid-template-dimension: &lt;1&gt; &lt;2&gt; ... &lt;n&gt;;</code>.
	You can define as many columns as you want, sized however you want! For instance, the magic incantation for "four 50px columns and a fifth which uses up all the remaining space"
	is simply <code>grid-template-columns: 50px 50px 50px 50px auto;</code>. This is unnecessarily gross, so CSS gives us a useful
	function: <code>repeat(n, val)</code>. This literally just repeats <code>val</code> n times (note: this is not
	actually universal, it's only for grid). So we can simplify: <code>grid-template-columns: repeat(4, 50px) auto;</code>.
</p>
<p>
	Pixels are bad, because they don't work the same on every screen. A better unit is <code>%</code>. In the context of grid,
	percent just allocates space remaining along the axis! So for instance, if we want to have 3 thin inner columns and 2 wide outer columns...
	<code>grid-template-columns: 35% repeat(3, 10%) 35%;</code>. This will always scale the same way for every screen size!
</p>
<h2>Aside: Percent</h2>
<p>
	At this point everyone should have the mantra "percent means something different in transform than in top" burned into their brains.
	The CSS percent unit is delicate and complicated! Whenever you use it, <i>be sure</i> you know what it's doing. Because percent means
	something different in <code>grid-template-columns</code> than in <code>width</code>...
</p>
<h2>Back on track...</h2>
<p>
	Of course, percentages aren't the only useful tool here. We also have the <code>fr</code> unit! <code>fr</code> essentially allocates
	space as evenly as possible, but <i>weighted</i>. So for instance, if we want to have 2 columns of the same width, and a third column twice as big as them,
	<code>grid-template-columns: 1fr 1fr 2fr;</code> will work perfectly. We <i>could</i> manually calculate <code>grid-template-columns: 25% 25% 50%;</code>,
	but that's bad.
</p>
<p>
	There are also two convenient "sorta-units": <code>min-content</code> and <code>max-content</code>. <code>min-content</code>
	is always the thinnest the column or row can get before the inner items get too cramped and overflow, and <code>max-content</code>
	is always the widest the column or row can get before the inner items have "too much" space. This is very nice for goldilocks layouts
	where you want a column to be "just right" and have the others fit around it! For instance, you might have a 2-panel layout with a thin sidebar (maybe containing links!)
	and a content block; you could do that with <code>grid-template-columns: max-content auto;</code>.
</p>
<h1>Grid-Auto-*</h1>
<p>
	Templates are nice, but what if we don't know how much content we have? A good example of this situation is a
	music player app, where you have nice fancy grid tiles for each song, but you aren't sure how many songs there are.
	Rather than trying to write an infinitely long <code>grid-template-rows</code>, you can set <code>grid-auto-rows: 50px;</code>
	<i>almost</i> everything works in <code>grid-auto-rows</code>, with the sole exception of <code>fr</code> (you can still use <code>auto</code> for even distribution).	
</p>
<p>
	Whenever the layout engine needs a new row (or column), it will <i>first</i> check if there's a remaining template; and if not,
	it'll use whatever the <code>grid-auto-*</code> value is.
</p>
<h1>Grid-Template-Areas</h1>
<p>
	This is the last of the black magic: <code>grid-template-areas</code> and <code>grid-area</code>.
	Grid-template-areas is a very strange property. It contains arbitrarily many values for <i>rows</i>, and contains <i>strings</i> (in double quotes)
	describing the <i>area names within columns</i>. For example:
</p>
<pre><code>.grid-container {
	grid-template-areas: "b b a"
	                     "b b c"
                             "d d d";
}</code></pre>
<p>
	This doesn't do much without another tag: <code>grid-area</code>. This is applied to <i>grid cells</i>, not to the grid itself! Say it out loud:
	<b><code>grid-area</code> applies to the grid cell, not to the grid container!</b>.
</p>
<p>
	Continuing the example, if we put a few <code>span</code>s defined like so into a grid...
</p>
<pre><code>&lt;style&gt;
.grid-container {
	display: grid;
	grid-template-areas: "b b a" /* defines 3 rows and 3 columns with nicely labeled cells */
                             "b b c"
                             "d d d";
	height: 300px;
}
&lt;/style&gt;
&lt;div class="grid-container"&gt;
	&lt;span style="grid-area: a; background-color: purple;"&gt;Area A&lt;/span&gt;
	&lt;span style="grid-area: b; background-color: green;"&gt;Area B&lt;/span&gt;
	&lt;span style="grid-area: c; background-color: orange;"&gt;Area C&lt;/span&gt;
	&lt;span style="grid-area: d; background-color: red;"&gt;Area D&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<style>
.grid-container {
	display: grid;
	grid-template-areas: "b b a"
                             "b b c"
                             "d d d";
	height: 300px;
}
</style>
<div class="grid-container">
	<span style="grid-area: a; background-color: purple;">Area A</span>
	<span style="grid-area: b; background-color: green;">Area B</span>
	<span style="grid-area: c; background-color: orange;">Area C</span>
	<span style="grid-area: d; background-color: red;">Area D</span>
</div>
<p>
	Note how, without even having to set a <code>grid-template-rows</code>, we got a decent layout!
	More importantly, we now have elements <i>spanning across grid lines</i> - there are actually 3 columns and 3 rows,
	but we only have 4 elements filling them!
</p>
<p>
	<code>grid-template-areas</code> is extraordinarily powerful, and I highly recommend playing with it on your own.
	Mix it with <code>grid-template-*</code> to control the sizes of your regions!
</p>
<p>
	I strongly recommend everyone practice grids on their own.
</p>
[/]
[#template.html]