Share Description
This free, interactive course on Scrimba will introduce you to the most potent layout system that CSS has to offer. Through 14 interesting, practical screencasts, this lesson, led by instructor Per Harald Borgen, aims to transform you from a CSS Grid beginner to a competent practitioner. With the ability to interrupt the instructor at any time and alter the code right in the browser, this is an active learning environment rather than a passive video course. A full website layout, a dynamic image grid, and a well-organized article page are the three separate, real-world projects you will build as part of the program, which is based on practical application. Over 18 lessons, you will not only master the core concepts of CSS Grid but also learn the crucial skill of how and when to combine it with Flexbox to create any modern web layout with precision and efficiency.
Topics the Course Covers
- Grid Fundamentals: Understanding display: grid, grid tracks (columns and rows), and grid gaps.
- Building Your First Grid: Creating and defining explicit grids using grid-template-columns and grid-template-rows.
- Flexible Sizing: Mastering flexible layouts with the fr unit and the powerful repeat() function.
- Item Placement: Controlling content with precision using line-based positioning (grid-column, grid-row) and named lines.
- Semantic Layouts: Using the highly intuitive grid-template-areas to name and place grid sections.
- Responsive Grids: Building intrinsically responsive designs using auto-fit, auto-fill, and the minmax() function.
- The Implicit Grid: Learning how the grid handles content that overflows the explicit grid with grid-auto-rows.
- Powerful Alignment: Gaining full control over alignment and centering with justify-content, align-content, justify-items, and align-items.
- Real-World Projects: Applying all concepts to build a website layout, an image grid, and an article layout.
- Grid vs. Flexbox: Understanding the critical difference between the two systems and when to use one, the other, or both together.
Benefits of Opting for This Course
- Learn through Scrimba's unique interactive platform, allowing you to code along directly within the tutorial.
- Build a portfolio of three practical projects to showcase your new layout skills.
- Gain the ability to create complex, two-dimensional layouts with simple, clean CSS.
- Drastically simplify your HTML structure and reduce your reliance on CSS hacks or floats.
- Write layout code that is far more readable, maintainable, and easier to debug.
- Master a modern, in-demand skill that is essential for all front-end developers.
- Understand how to build intrinsically responsive designs without being overly reliant on media queries.
- Get the entire course, from start to finish, completely for free.
Why Take This Course
The CSS Grid module has fundamentally changed web design, making it easier than ever to create sophisticated website layouts. It simplifies both your HTML and CSS, giving you more control over your designs than any previous method. Because it is a native browser feature, you can achieve these results without any external frameworks. Staying up-to-date as a front-end developer means mastering CSS Grid, and this course is the perfect way to do it. It removes the guesswork and teaches you everything you need to know in a practical, project-based format. If you've ever been frustrated by floats, positioning hacks, or the limitations of one-dimensional layout systems, this course will empower you to build cleaner, more professional, and more responsive websites with confidence.
