upload 42 minutes past the nick of time
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 2m34s
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 2m34s
This commit is contained in:
123
site/introwebdev/week-9-grid-2.html
Normal file
123
site/introwebdev/week-9-grid-2.html
Normal file
@@ -0,0 +1,123 @@
|
||||
[!]
|
||||
[=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: <1> <2> ... <n>;</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><style>
|
||||
.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;
|
||||
}
|
||||
</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>
|
||||
</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]
|
||||
Reference in New Issue
Block a user