Tyler Clarke
3aef6fa387
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 2m34s
60 lines
2.1 KiB
HTML
60 lines
2.1 KiB
HTML
[!]
|
|
[=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><style>
|
|
#grid {
|
|
display: grid;
|
|
grid-template-columns: 100px auto;
|
|
grid-template-rows: 100px auto;
|
|
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>
|
|
</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]
|