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

# 12 - auto-fit and auto-fill
* In the repeat function of `grid-template-column` or `grid-template-row` you can use `auto-fit` or `auto-fill` as first argument.
* `auto-fill` will create as many columns/rows as possible, making it possible to move items at the end of the screen
* `auto-fit` will create as many columns/rows as possible but without making the grid physically wider
    * So the main difference is for few items and when using `grid-column-end` for an item.

# 13 - Using minmax() for Responsive Grids
* In the repeat function of `grid-template-column` or `grid-template-row` you can use the `minmax` function as second argument.
* It allows to give a minimum and maximum value for an item width/height.
* In combination with `fr` for the max width and `auto-fit` in the repeat function, this can help to create responsive designs.
* Another solution is to use `grid-template-column: fit-content(100px) 150px 150px` which for the first column will fit the content into the box, but set an upper limit to 100px for the width.

# 14 - Grid Template Areas
* Layout the grid as follows
```
.content {
    gird-template-columns: (add your values)
    grid-template-area:
        "sidebar-1   header     sidebar-2"
        "sidebar-1   content    sidebar-2"
        "footer      footer     footer";
}
.item1 {
    grid-area: sidebar-1;
}
.item2 {
    grid-area: header;
}
.item3 {
    grid-area: sidebar-2;
}
.item4 {
    grid-area: content;
}
.item5 {
    grid-area: footer;
}
```
* Now you can use media queries and redefine the grid area:
```
@media (max-width: 500px) {
  .container {
    grid-template-areas:
      "content    content   content"
      "sidebar-1  sidebar-1 sidebar-2"
      "footer     footer    footer";
  }
}
```
* When you have areas, you get line names for free, so `footer-start` and `footer-end` is automatically available for things like `grid-column: footer-start / footer-end;`

# 15 - Naming Lines in CSS Grid
* Name lines (space between columns or rows) like this: `grid-template-columns: [first-line] 1fr [second-line] 1fr [last-line];`
* Then you can use the names: `grid-column: first-line / last-line` instead of `grid-column: 1 / 3`
* You can assign more than one name per line.

# 16 - grid-autoflow-dense Block Fitting
* If items dont fit in columns due to their span, the space before them remains unused.
* With `grid-auto-flow: dense;` this space is filled with subsequent items.

# 17 - CSS Grid Alignment and Centering
* In CSS grid:
    * `align-*` is in column axis
    * `justify-*` is in row axis
* 3 different targets:
    * `align-items`
    * `align-content`
    * `align-self`
* CSS shorthand: `place-items: center start;` = `align-items: center; justify-items: start;`
* `*-items` is used on the grid container and affects the grid items. Values are `stretch` (default), `center`, `start`, `end`
* `*-content` is also used on the grid container and affects the grid content if the items don't fill all the space (e.g. with fixed widths). Values are `start` (default), `center`, `end`, `space-between` (very useful), `space-between`, `space-evenly`
* `*-self` is used on the grid items. It overrides the container setting on an item to item basis.

# 18 - Re-Ordering Grid Items
* `order: 1` gives items a fixed order. Default is 0
* Attention: Screen readers and browsers only use this for placement. Selecting and screen reading works on the HTML source.

# 19 - Nesting Grid Image Gallery
* Grids can be nested
* A grid item can also be a grid container for other items
* Overlays can be realized with fixed positioned elements that switch between `display: none` and `display: grid`
* Within the overlay, grid can help to position the content with `justify-items` and `align-items`
* Use `grid-auto-flow: dense` to fill unused space in the grid.
* CSS `object-fit: fill | contain | cover | none | scale-down` defines how elements fill up space of their parent.
* Use `translate` or other properties together with `transistion` for animations.