admin/clarkeis.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload 42 minutes past the nick of time
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 2m34s
Details

Browse Source
This commit is contained in:
Tyler Clarke
2026-03-05 00:42:20 -05:00
parent 5edff913c3
commit 3aef6fa387
11 changed files with 761 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
site/introwebdev/week-8-grid-1.html Normal file
View File

@@ -0,0 +1,59 @@
[!]
[=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]