Introduction
  • Welcome to the CSS Grids Course!
  • What You'll Be Able to do After this Course
Intro to CSS Grid Layouts
  • What is CSS Grid?
  • Browser Support
  • Quick & Easy Set-Up
  • CSS Grid Terminology
Defining and Using CSS Grids
  • Intro
  • Enabling CSS Grid with display: grid
  • Defining the Grid: grid-template-rows & grid-template-columns
  • Arranging Grid Items: grid-row-start/end & grid-column-start/end
  • Spanning a Fixed Number of Rows or Columns: span
  • Naming Grid Lines
  • Defining Gutters: grid-row-gap & grid-column-gap
  • Source-Order Independence: order
  • Exercise Sheet 1: Apply What You Learned!
Using Grid Areas, Equal Sizes, repeat() & minmax()
  • Intro
  • Using Grid Areas: grid-area
  • Using Grid Areas: grid-template-area
  • Repeating Rows and Columns: repeat()
  • The fr Unit
  • Defining Minimum and Maximum Sizes: minmax()
  • Auto-Filling a Grid with Rows and Columns: repeat(auto-fill)
  • repeat(auto-fit)
  • Exercise Sheet 2: Apply What You Learned!
Justifying the Grid Container and Grid Items
  • Intro
  • Justifying Items Horizontally: justify-items
  • Aligning Items Vertically: align-items
  • Justifying the Container: justify-content
  • Aligning the Container: align-content
  • Overriding Alignments: justify-self & align-self
  • Exercise Sheet 3: Apply What You Learned!
The Implicit Grid and Grid Flow
  • Intro
  • The Implicit Grid: grid-auto-rows & grid-auto-columns
  • Flow for the Implicit Grid: grid-auto-flow
  • Shorthand When Using "grid"
  • Exercise Sheet 4: Apply What You Learned!
Advanced CSS Grids
  • Intro
  • Overlapping Grid Items
  • Nested Grids
  • CSS Grid and Absolute Positioning I
  • CSS Grid and Absolute Positioning II
  • Layout Prototyping
  • Exercise Sheet 5: Do It Yourself!
Bonus
  • Bonus: Reach Your Full Potential As A Software Developer