Your cart is empty.
Keep shopping10 Days Of CSS Grid
3,002 students
10 Days Of CSS Grid
Build 10 CSS Grid projects — from classic designs to creative layouts — curated in one structured course, no frameworks.
Created byJoshan Grewal
Last updated 4/2026
English
What you'll learn
- Day 1: Form CSS Grid Design
- Day 2: Multi Colored Centered Boxes CSS Grid Design
- Day 3: Timeline CSS Grid Design
- Day 4: Nested Grid CSS Design
- Day 5: Mobile CSS Grid Design
- Day 6: Keyboard CSS Grid Design
- Day 7: Diamond CSS Grid Design
- Day 8: Split Image CSS Grid Design
- Day 9: Responsive Webpage CSS Grid Design
- Day 10: Responsive Navigation Dropdown Menu CSS Grid Design
Explore related topics
Course content
11 sections • 32 lectures • 3h 16m total length
Requirements
- Introductory/Foundational knowledge of CSS Grid and all of its main properties.
- Students should have a good understanding of how to setup and create basic HTML documents.
- Students should have a good understanding of generic CSS.
- A web browser is required. We will use Google Chrome and will occasionally make use of the Chrome Dev Tools.
- A coding editor is required. We will use VS Code with the Live Server plugin installed.
Description
This course is fully created and taught by the instructor. In this updated version, AI tools were used in a limited way to help refine some introductory content. All teaching, explanations, and concepts are based on the instructor’s own knowledge and experience.
If you’re looking to build practical, professional layouts using CSS Grid, you’re in the right place. This course is designed for students who already understand the fundamentals of CSS Grid (e.g. grid-template-columns, justify-content, align-items, etc.) and are ready to move beyond the theory into practical, hands-on projects.
This collection of layout focused exercises is designed to help you think like a front-end developer, using Grid to solve common design problems.
What You'll Build:
Day 1: Form layout with two equal-width columns
Day 2: Multi-colored centered boxes using auto-fit
Day 3: Timeline layout with column gaps and alignment
Day 4: Nested grid layout using justify-items and align-items
Day 5: Mobile phone layout with subgrid and auto rows
Day 6: Keyboard layout using grid-column and alignment
Day 7: Diamond grid using column spanning
Day 8: Split-image grid layout
Day 9: Fully responsive webpage layout with grid-template-areas
Day 10: Responsive dropdown navigation menu design
How This Course Is Structured?
Rather than teaching every CSS Grid property in isolation, this course focuses on practical layout thinking. Each project is inspired by real-world layouts, showing how CSS Grid can be used to recreate them in a clean, efficient way.
Some layouts are simple and straightforward, while others are more involved all are meant to deepen your understanding of how Grid works in realistic design situations.
By the end of the course, you should have a solid understanding in how you can incorporate the CSS Grid layout model into your own website designs. Ready to take your CSS Grid skills from basic to applied.
Enroll now and start building with CSS Grid.
Who this course is for:
- Intermediates who have introductory/foundational knowledge of CSS Grid properties that want to expand their knowledge further by building some practical projects.
- Anyone looking to see how CSS Grid can be used given different design layouts.