3. CSS Grid Fundamentals
4. Grid Auto-flow
5. Sizing tracks in CSS Grid
6. CSS Grid repeat function
7. Sizing Grid Items
8. Placing Grid Items
9. auto-fit and auto-fill
10. Using minmax() for Responsive Grids
11. Grid Template Areas:
    • Area Line Names
    • Areas
12. Naming Lines in CSS Grid
13. grid-auto-flow dense Block Fitting
14. CSS Grid Alignment + Centering
15. Re-ordering Grid Items
16. Nesting Grid with Album Layouts
17. CSS Grid Image Gallery
18. Flexbox vs CSS Grid:
    • Axis Flipping
    • Controls on Right
    • Flex on Item
    • Perfectly Centered
    • Self Control
    • Stacked Layout
    • Unknown Content Size
    • Unknown Number of Items
    • Variable Widths on Each Row
19. Recreating Codepen
20. Bootstrappy Grid with CSS Variables
21. Responsive Website
22. Full Bleed Blog Layout

Defines:

• Gap between grid elements display: grid;
• Columns width grid-template-columns: 200px 400px; (first column to 200px, second column to 400px)
• Rows height grid-template-rows: 50px 100px; (first column to 50px, second column to 100px)
• Remaing rows default height grid-auto-rows: 250px 500px;

.container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 200px 400px;
        grid-template-rows: 50px 100px;
        grid-auto-rows: 250px 500px;
      }

Determines if new elemens will be added as rows (default behaviour) or as columuns

• Define thw two first columns grid-template-columns: 200px 400px; (first column to 200px, second column to 400px)
• Add new elements as columns grid-auto-flow: column;
• Define auto flow columns size grid-auto-columns: 250px

<div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">auto-flow</div>
      <div class="item">auto-flow</div>
</div>

<style>
.container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 200px 400px;
        grid-template-rows: 50px 100px;
        grid-auto-rows: 250px 500px;
      }
</style>

Fractional unit (fr) represents the amount of space left after all the elemens are laid out, including its margins, paddings and borders.

• grid-template-columns: 200px 2fr 1fr 2fr; will divide the remaning space of <div= class="container"> after adding a 200px column into 3 other columns, the first one will use 2 fractional units, the second 1 fractional unit and the last 2 fractional units.

.container {
  display: grid;
  grid-gap: 20px;
  border: 10px solid var(--yellow);
  grid-template-columns: 200px 2fr 1fr 2fr;
}

• For grid-template-rows the default height of an element is just however hight the element is and default width of an element is as wide as the actual view port.

.container {
  display: grid;
  grid-gap: 20px;
  border: 10px solid var(--yellow);
  grid-template-columns: 200px 2fr 1fr 2fr;
}

• auto keyword automatcly sizes the column / row to the the wider / highest grid element.

    .container {
      display: grid;
      height: 400px;
      grid-gap: 20px;
      border: 10px solid var(--yellow);
      grid-template-columns: 200px 1fr 1fr auto;
    }

• repeat function cuts down the amout of line codes

.container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(2, 150px) 2fr repeat(2,100px);
      }

• Grid items by default naturally flows one after another and fit themselves as into the grid as they can.
• grid-column: span 2 and grid-row: span 2 changes the natural flow of the column/row.

• Grid items position and size can be changed either using the abreviation grid-column / grid-row setting where the item should start, end and its size

See 11 - Spanning and Placing Cardio for more examples

  /* Make item 20 start at row 4 and go for 3 */
  .item20 {
    grid-row: 4 / span 3;
  }