[!] [=title "Week 8: Grid 1"] [=content-]

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.

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:

    <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>

Which looks like this:

Square 1 Square 2 Square 3 Square 4

Note something interesting: even though the `span`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.

The grid is set up by the `grid-template-columns` and `grid-template-rows` 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 `100px 1fr`: this means "make the first row/column 100px, and make the second row/column fill whatever space is left". (The `fr` unit is actually a lot more complicated than that, but we won't worry about that for now).

I highly recommend playing with this.

[/] [#template.html]