pixelspencil · March 22, 2021 23:51 · Mar 22, 2021 · Mar 16, 2021 · Mar 16, 2021 · Mar 16, 2021
diff --git a/readme.md → css-grid-101.md b/readme.md → css-grid-101.md
diff --git a/readme.md b/readme.md
@@ -6,6 +6,15 @@
     - [Example - the beautiful `fr` unit](#example---the-beautiful-fr-unit)
     - [The math](#the-math)
       - [Notes](#notes)
+  - [Minmax](#minmax)
+    - [Idea/future](#ideafuture)
+  - [Implicit Tracks](#implicit-tracks)
+    - [Example 1 - Implicit tracks](#example-1---implicit-tracks)
+    - [Example 2 - Implicit tracks with `grid-auto-row`](#example-2---implicit-tracks-with-grid-auto-row)
+  - [True Column Flow](#true-column-flow)
+    - [Question](#question)
+  - [Solution without CSS Grid - DOM is row layout based](#solution-without-css-grid---dom-is-row-layout-based)
+    - [Solution with CSS Grid - True column layout with Grids](#solution-with-css-grid---true-column-layout-with-grids)
 
 ---
 
@@ -108,14 +117,162 @@
 
 <br>
 
+## Minmax
+
+- The minmax value lets you set ranges of values for your Grid columns & rows.
+- [See grid is perfect for responsive layout for an example of minmax](https://mastery.games/post/grid-for-responsive-layout/).
+
+### Idea/future
+
+Imagine being able to set a range for your padding, at least 10px but no more than 10%.
+
+```css
+  element {
+    padding: minmax(10px, 10%)
+  }
+```
+
 ---
 
 <br>
 
+## Implicit Tracks
+
+- Implicit tracks are auto-generate tracks that default to a size of auto
+- You do not need to explicitly spell out a new column or row for each item that will go into your grid
+- You just define the template using `grid-template-rows` and `grid-template-columns`.
+- When your grid has more stuff in it than what was defined, it will go ahead and create new columns & rows beyond what was specified
+
+### [Example 1 - Implicit tracks](https://codepen.io/geddski/pen/Bwpdme/)
+- In the example below the purple item does not have any content, it's only size is it's borders
+- The grid spec allows us to specify exactly how we want any auto-generated implicit tracks to behave
+- We only define two columns and one row (two cells total).
+- When a third item went into the grid it created a new second row automatically
+
+```html
+<div class="container">
+  <div class="item orange"></div>
+  <div class="item blue"></div>
+  <div class="item purple"></div>
+</div>
+```
+
+```css
+.container{
+  outline: 5px solid black;
+  display: inline-grid;
+  width: 300px;
+  height: 300px;
+  gap: 10px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+}
+```
+
+### [Example 2 - Implicit tracks with `grid-auto-row`](https://codepen.io/geddski/pen/qPRXYo/)
+
+- Same example but this time telling our Grid to make any new rows take up an equal share of the available space, using `grid-auto-rows: 1fr`;
+
+```html
+<div class="container">
+  <div class="item orange"></div>
+  <div class="item blue"></div>
+  <div class="item purple"></div>
+</div>
+
+```
+
+```css
+.container{
+  outline: 5px solid black;
+  display: inline-grid;
+  width: 300px;
+  height: 300px;
+  gap: 10px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-auto-rows: 1fr;
+}
+```
+
+ - Our new implicit row forced our original first row to stop hogging all the space.
+ - If you set `grid-auto-rows` to a fixed unit, like 50px each new row would adopt that value as it's row height.
+
 ---
 
 <br>
 
----
+## True Column Flow
+
+### Question
+
+> Make items fill up entire columns first rather than rows first.
+
+The DOM doesn’t work this way: it always places elements horizontally.
+
+## [Solution without CSS Grid - DOM is row layout based](https://codepen.io/geddski/pen/EwZvMo/)
+
+```html
+<div class="container">
+  <div class="item numbered orange">1</div>
+  <div class="item numbered blue">2</div>
+  <div class="item numbered purple">3</div>
+  <div class="item numbered red">4</div>
+  <div class="item numbered green">5</div>
+  <div class="item numbered grey">6</div>
+</div>
+```
+
+```css
+.container{
+  outline: 5px solid black;
+  width: 300px;
+  height: 300px;
+}
+
+.item{ 
+  width: 50%;
+  float: left;
+  height: calc(300px / 3);
+}
+```
+
+To make the items stack in columns would take some JS to do so:
+
+```
+1 4
+2 5
+3 6
+```
+
+### [Solution with CSS Grid - True column layout with Grids](https://codepen.io/geddski/pen/OxWxVV/)
+
+With CSS Grid it’s easy using the `grid-auto-flow` property:
+
+```html
+<div class="container">
+  <div class="item numbered orange">1</div>
+  <div class="item numbered blue">2</div>
+  <div class="item numbered purple">3</div>
+  <div class="item numbered red">4</div>
+  <div class="item numbered green">5</div>
+  <div class="item numbered grey">6</div>
+</div>
+```
+
+```css
+.container{
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  outline: 5px solid black;
+  width: 300px;
+  height: 300px;
+}
+```
 
-<br>
+- This makes the content fill up column first instead of row first.
+- The left column is filled first with items `1`, `2` & `3`
+- Then the right with items `4`,`5` & `6` than the row first
+- Any new items that are added will make the grid create new implicit columns instead of implicit rows.
diff --git a/readme.md b/readme.md
@@ -1,6 +1,6 @@
 - [CSS Grid 101](#css-grid-101)
   - [Gaps](#gaps)
-  - [Example - the super smart grid gaps](#example---the-super-smart-grid-gaps)
+    - [Example - the super smart grid gaps](#example---the-super-smart-grid-gaps)
   - [Named Grid Lines](#named-grid-lines)
   - [Fraction Units](#fraction-units)
     - [Example - the beautiful `fr` unit](#example---the-beautiful-fr-unit)
@@ -17,7 +17,7 @@
 - They only apply to the inner tracks
 - Outer tracks stay flush against the edges like we want them to 99% of the time.
 
-## [Example - the super smart grid gaps](https://codepen.io/geddski/pen/eGgWEr/)
+### [Example - the super smart grid gaps](https://codepen.io/geddski/pen/eGgWEr/)
 
 ```html
 <div class="container">
@@ -43,6 +43,8 @@
 
 ---
 
+<br>
+
 ## Named Grid Lines
 
 - Grid provides a way to size and position everything that goes into the grid.
@@ -51,6 +53,8 @@
 
 ---
 
+<br>
+
 ## Fraction Units
 
 - The `fr` unit can only be used in a grid.
@@ -98,4 +102,20 @@
 - `fr` units place nicely with all other units.
 - Unlike percentages (which are based on the size of the Grid container), fractions are based only on the free space that’s left. - You won’t accidentally cause overflow/scroll issues like you might if you used percentages.
 
-**It’s easy to think fr units are just like flexbox’s flex-grow, but there’s a big difference.**
+**It’s easy to think fr units are just like flexbox’s flex-grow, but there’s a big difference.**
+
+---
+
+<br>
+
+---
+
+<br>
+
+---
+
+<br>
+
+---
+
+<br>
diff --git a/readme.md b/readme.md
@@ -11,8 +11,6 @@
 
 # CSS Grid 101
 
----
-
 ## Gaps
 
 - You can set gaps between your rows and columns

diff --git a/readme.md b/readme.md
@@ -1,6 +1,11 @@
 - [CSS Grid 101](#css-grid-101)
   - [Gaps](#gaps)
   - [Example - the super smart grid gaps](#example---the-super-smart-grid-gaps)
+  - [Named Grid Lines](#named-grid-lines)
+  - [Fraction Units](#fraction-units)
+    - [Example - the beautiful `fr` unit](#example---the-beautiful-fr-unit)
+    - [The math](#the-math)
+      - [Notes](#notes)
 
 ---
 
@@ -36,4 +41,63 @@
 
 - Gaps handle disabling margins on first/last children
 - Gaps also handle when content shifts to multiple lines
-- People behind spec are currently working to enable gaps in flexbox.
+- People behind spec are currently working to enable gaps in flexbox.
+
+---
+
+## Named Grid Lines
+
+- Grid provides a way to size and position everything that goes into the grid.
+- Items can span forwards or backwards, overlap with other items, span multiple columns or rows, etc.
+- [Further reading: Naming Your CSS Grid Lines](https://mastery.games/post/naming-css-grid-lines/)
+
+---
+
+## Fraction Units
+
+- The `fr` unit can only be used in a grid.
+- Different from percentages and viewport units ( `vw`, `vh`) etc.
+- When assigning a column or row a fraction unit, it is basically saying take up a certain fraction of the free space left over after all other tracks/gaps take their fixed space.
+
+### [Example - the beautiful `fr` unit](https://codepen.io/geddski/pen/BwpZMO/)
+
+- The first (orange) column is set to 50px wide
+- The grid is set to have 10px gaps between tracks
+- This lets the second (blue) column take up 1 fraction of remaining space
+- The last (purple) column takes up 2 fractions of remaining space.
+
+```html
+<div class="container">
+  <div class="item orange"></div>
+  <div class="item blue"></div>
+  <div class="item purple"></div>
+</div>
+```
+
+```css
+.container{
+  outline: 5px solid black;
+  display: inline-grid;
+  width: 300px;
+  height: 300px;
+  gap: 10px;
+  grid-template-columns: 50px 1fr 2fr;
+}
+```
+
+### The math
+
+- `gridWidth` = 300px
+- `totalGaps` = `gridGap` (10px) * 2 = 20px;
+- `column1Width` [orange] = 50px;
+- `freeSpace` = `gridWidth` - `totalGaps` - `column1Width` = 230px
+- `numFRUnits` = 3 (the sum of all the fr units used in the grid columns)
+- `column2Width` = `freeSpace` * ( 1(fr) / `numFRUnits`) —-> 230 * (1 / 3) = 76.66px
+- `column3Width` = `freeSpace` * ( 2(fr) / `numFRUnits`) —-> 230 * (2 / 3) = 153.33px
+
+#### Notes
+
+- `fr` units place nicely with all other units.
+- Unlike percentages (which are based on the size of the Grid container), fractions are based only on the free space that’s left. - You won’t accidentally cause overflow/scroll issues like you might if you used percentages.
+
+**It’s easy to think fr units are just like flexbox’s flex-grow, but there’s a big difference.**
diff --git a/readme.md b/readme.md
@@ -1 +1,39 @@
-‎‎
+- [CSS Grid 101](#css-grid-101)
+  - [Gaps](#gaps)
+  - [Example - the super smart grid gaps](#example---the-super-smart-grid-gaps)
+
+---
+
+# CSS Grid 101
+
+---
+
+## Gaps
+
+- You can set gaps between your rows and columns
+- They only apply to the inner tracks
+- Outer tracks stay flush against the edges like we want them to 99% of the time.
+
+## [Example - the super smart grid gaps](https://codepen.io/geddski/pen/eGgWEr/)
+
+```html
+<div class="container">
+  <div class="item orange"></div>
+  <div class="item blue"></div>
+  <div class="item purple"></div>
+</div>
+```
+
+```css
+    .container {
+      outline: 5px solid black;
+      display: grid;
+      width: 500px;
+      height: 300px;
+      gap: 30px;
+    }
+```
+
+- Gaps handle disabling margins on first/last children
+- Gaps also handle when content shifts to multiple lines
+- People behind spec are currently working to enable gaps in flexbox.
diff --git a/readme.md b/readme.md
@@ -0,0 +1 @@
+‎‎