CSS Grid Courses and Certifications

CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox)

1576 ratings at Udemy

CSS Course - Project Based CSS Tutorial. Learn how to create modern, responsive websites using CSS / CSS Grid / Flexbox

• Udemy
• 11 hours 31 minutes
• Self-Paced
• Paid Course

CSS Grids for Everyone

Build custom CSS Grid layouts: position items anywhere, define named grid areas, use the fractional unit, nest grids, and handle auto-fill versus auto-fit.

• Laracasts
• 37 minutes
• Self-Paced
• Paid Course

Grid Garden

Learn CSS Grid by watering carrots and poisoning weeds in an interactive garden game.

• Independent
• Self-Paced
• Free Online Course

A getting-started guide to CSS Grid, from line-based placement and named areas to auto-placement, alignment, and responsive track sizing.

• Independent
• Self-Paced
• Free Online Course

CSS Grids Simplified

Learn to create responsive layouts with CSS Grid, using grid sizing, alignment, spacing, named areas, auto flow, and implicit grids.

• Laracasts
• 1 hour 29 minutes
• Self-Paced
• Paid Course

Kevin Powell

Cool 3D Grid Layout - Can I Clone It?

Recreate a striking 3D grid layout with HTML and CSS, exploring grid structure, hover states, perspective, sliding behavior, and shadows.

• YouTube
• 1 hour 8 minutes
• Self-Paced
• Free Video

Build flexible one-dimensional layouts with CSS flexbox and two-dimensional layouts with CSS grid through projects like a to-do app, Tea Cozy, and a task board.

• Codecademy
• 4 hours
• Self-Paced
• Free Trial Available

Kevin Powell

Creating a Robust Grid System Using Subgrid

Build a robust, flexible CSS layout with subgrid, custom properties, flatter markup, responsive sections, and grid breakouts.

• YouTube
• 36 minutes
• Self-Paced
• Free Video

Web Dev Simplified

Creating a Tricky CSS Vertical Timeline

Build a flexible notification-style vertical timeline from scratch while watching a live CSS problem-solving process.

• YouTube
• 46 minutes
• Self-Paced
• Free Video

DesignCourse

Impossible Layouts for CSS to Handle

Build a brutalist web layout with CSS Grid, translating a rows-and-columns design into HTML and CSS.

• YouTube
• 22 minutes
• Self-Paced
• Free Video

Dani Krossing

CSS Grids Will Change How We Create Website Layouts - Learn HTML and CSS

Learn to build CSS Grid layouts, place HTML elements, add spacing, and make grids responsive using CSS.

• YouTube
• 25 minutes
• Self-Paced
• Free Video

Kevin Powell

Subgrid and Container Queries: Creating Dynamic Layouts in CSS

Explore how container queries and subgrid work together to create flexible, responsive layouts. Learn to implement subgrid for rows and columns, and understand potential conflicts between these powerful CSS features.

• YouTube
• 21 minutes
• Self-Paced
• Free Video

Kevin Powell

A New Approach to Container and Wrapper Classes in CSS

Explore a new approach to container and wrapper classes using CSS grid for flexible layouts with breakout sections, inspired by modern web design techniques.

• YouTube
• 25 minutes
• Self-Paced
• Free Video

Kevin Powell

Flexbox or Grid: Solving Layout Challenges

Explore five layout challenges comparing Flexbox and Grid usage, with insights from the Discord community and Kevin Powell's expert analysis.

• YouTube
• 25 minutes
• Self-Paced
• Free Video

Kevin Powell

Creating Simple Layouts - Comparing Flexbox and Grid Approaches

Explore various CSS layout techniques as Kevin Powell analyzes community submissions, comparing flexbox, grid, and other approaches to create an efficient and responsive design.

• YouTube
• 16 minutes
• Self-Paced
• Free Video