playlistduration

Build Layouts with CSS Grid

by Net Ninja · 8 videos

Total watch time

2h 12m

at 1× speed · exactly 2 hours, 12 minutes, 14 seconds at 1×

1×2h 12m 14s
1.25×1h 45m 47s
1.5×1h 28m 9s
1.75×1h 15m 34s
2×1h 6m 7s
Average video16m 32s
Longest28m 14s
Shortest6m 49s
Compare Open on YouTube JSON

Plan to finish

About 3 days at an hour a day

Pick a daily pace and the days you'll watch. Ticked videos are skipped.

Days

At one hour a day, every day, this playlist takes about 3 days. Turn on JavaScript to plan around your week.

Videos (8)

2h 12m in total · tick what you've watched

Tick videos you've watched — progress is saved in this browser.

Videos to
Watched
1 Build Layouts with CSS Grid #1 - CSS Grid Basics 28:14 2022-05-17
2 Build Layouts with CSS Grid #2 - Multi-Column Layout 19:26 2022-05-18
3 Build Layouts with CSS Grid #3 - Holy Grail Layout 18:31 2022-05-20
4 Build Layouts with CSS Grid #4 - Masonry Style Layout (part 1) 17:07 2022-05-23
5 Build Layouts with CSS Grid #5 - Masonry Style Layout (part 2) 6:49 2022-05-24
6 Build Layouts with CSS Grid #6 - Full-width Personal Site Layout (Part 1) 14:40 2022-05-27
7 Build Layouts with CSS Grid #7 - Full-width Personal Site Layout (part 2) 8:50 2022-05-30
8 Build Layouts with CSS Grid #8 - 12 Column Grid 18:37 2022-06-02

Embed a badge

Show the watch time in a README or course description — it links back here and updates itself

Watch time: 2h 12m · 8 videos

Markdown
[![Watch time: 2h 12m · 8 videos](https://playlistduration.com/badge/playlist/PL4cUxeGkcC9hk02lFb6EkdXF2DYGl4Gg4.svg)](https://playlistduration.com/playlist/PL4cUxeGkcC9hk02lFb6EkdXF2DYGl4Gg4)
HTML
<a href="https://playlistduration.com/playlist/PL4cUxeGkcC9hk02lFb6EkdXF2DYGl4Gg4"><img src="https://playlistduration.com/badge/playlist/PL4cUxeGkcC9hk02lFb6EkdXF2DYGl4Gg4.svg" alt="Watch time: 2h 12m · 8 videos" width="196" height="20"></a>

Add ?speed=1.5 to the image URL for the time at that speed, ?label=Course to change the left text, or ?style=flat-square for square corners.

Want the numbers themselves? GET https://playlistduration.com/api/v1/playlist/PL4cUxeGkcC9hk02lFb6EkdXF2DYGl4Gg4 returns them as JSON — free, no key. API docs →

Data from the YouTube Data API as of 2026-09-22 (fresh). Private or deleted videos are excluded from totals.