# 02 - Starter Files and Tooling
* Firefox has good built-in tools to analyze CSS grid
* Node can help serve HTML files and reload them on change (browser-sync module)
* Wes Bos' repository: https://github.com/wesbos/css-grid.git
* Use Emmet for HTML and CSS
* TODO: Show list of VS code extensions.
* CSS: use `box-sizing: border-box` as it includes padding and borders

# 03 - Fundamentals
* Grid organizes page in rectangular grid cells.
* Implicit and explicit rows/columns
* Parent container needs to be `display: grid;`
    * makes direct children grid items
* `grid-template-columns: (size) (size)...` defines explicit columns
    * use `auto` to auto size columns to use up rest of the screen width
* `grid-gap: (size)` separates columns and rows

# 04 - CSS Grid Dev Tools
* Firefox can switch on/off grids
* It can also draw lines and show area names.

# 05 - Grid Implicit vs. Explicit Tracks
* Create explicit columns with `grid-template-columns: (size) (size)...` or `grid-template-rows: (size) (size)...`
* Size implicit columns and rows with `grid-auto-columns: (size) (size)...` and `grid-auto-rows: (size) (size)...`
    * Implicit rows/columns appear after explicit grid.

# 06 - grid-auto-flow Explained
* Decides if new elements are placed in rows or columns. Columns is default.
* It can be set with: `grid-auto-flow: column` or `grid-auto-flow: column`

# 07 - Sizing Tracks
* Be careful when using percentages in sizing, they dont take into account margins.
* `grid-template-columns: 100px 1fr 1fr 2fr` (1fr = fraction) makes 1 100px column, the other share the rest of the screen size with the defined ratio 1:1:2.
* You can combine `auto` and `1fr`

# 08 - CSS Grid repeat Function
* You can write things like `grid-template-columns: repeat(4, 1fr 2fr);` instead of `grid-template-columns: 1fr 2fr 1fr 2fr;`

# 09 - Sizing Grid Items
* Use `grid-column: span 3` or `grid-row: span 3`
* Will not overflow, but wrap over to the next row
* If wraping doesn't suffice, it will overflow.

# 10 - Placing Grid Items
* You can explicitely define the start and end tracks of an item with `grid-column-start: 2` and `grid-column-end: 5` or shorthand `grid-column: 2 / 5` or `grid-column: 2 / span 3`
* Negative numbers are also possible:
    * `grid-column: 2 / 5` = `grid-column: 2 / -2` for a 5 column layout.