Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

Fundamentals of CSS Grid

via Zero To Mastery Path

Overview

Learn CSS Grid from scratch and master modern layout techniques for responsive web design. Build clean, flexible, two-dimensional layouts that adapt beautifully across devices.
  • Define and customize CSS grids from scratch
  • Place and align grid items precisely
  • Use grid-template-areas for clear layout structure
  • Create fully responsive grid-based designs
  • Control spacing, sizing, and alignment effortlessly
  • Design real-world layouts like galleries and articles
  • Combine Grid with Flexbox where needed
  • Build confidence through hands-on projects and examples

Syllabus

  •   Introduction
    • Introduction
    • Exercise: Meet Your Classmates and Instructor
    • Course Resources
    • Developer Setup
  •   CSS Grid Fundamentals
    • Bruno
    • Introduction
    • Grid Garden
    • Grid Containers
    • Grid Items
    • Common Layouts
    • Note on Unsplash Random
    • Gallery Layout
    • Column Masonry
    • Typographix Gallery V1 - Styling - Part 1
    • Typographix Gallery V1 - Styling - Part 2
    • Typographix Gallery V1 - Modal Functionality
  •   Where To Go From Here?
    • Let's Keep Learning Together!
    • Review This Byte!
  •   Appendix - Developer Setup
    • Introduction
    • Mac / Linux Device Setup
    • Windows Device Setup
    • VSCode Setup & Template
    • VSCode Extensions
    • DevTools
    • GitHub

Taught by

Jacinto Wong

Reviews

Start your review of Fundamentals of CSS Grid

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.