finished chapter 10

CSS-Grid/course.md

@@ -13,4 +13,35 @@
     * 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 with   
+* `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.