The CSS Grid Layout is a W3C working draft that defines a powerful grid system to ultimately make it easier to lay out your web pages using CSS.
New Course: 3 CSS Grid Projects for Web Designers
In our new course, 3 CSS Grid Projects for Web Designers, you will build three projects to help you understand what’s going to be possible with “Grid”.
What You’ll Learn
With comprehensive guidance from ThemeKeeper Tuts+ instructor Craig Campbell, you’ll work through three projects to help you master the CSS Grid layout.
The first is beginner level and will introduce you to Grid concepts. The second takes things up a level, examining things like alignment and nesting. The final project is more advanced still, using Flexbox in combination with Grid. Following these three projects through to completion will steadily take you from Grid novice to confident Grid user.
Here are some free lessons from this course, as a preview of what you can expect:
How to Create a Simple Layout Using Column Spans
Learn how to create a simple Grid layout with CSS. We’re going to define our grid areas using the
How to Create Nested Grids
Sometimes, you may find yourself in need of a grid system within another grid system. In this video from the second project, you will create nested grids using the CSS Grid Layout module.
How to Lay Out an Advanced Grid
In the third project, things get more advanced. In this video from the final section of the course, you’ll lay out the main grid for this project.
Start Learning With a Free Trial
You can take our new course straight away with a free 10-day trial of our monthly subscription. If you decide to continue, it costs just $15 a month, and you’ll also get unlimited access to our full library of hundreds of courses, with new ones added every week.
Still want to learn more? We’ve built a comprehensive guide to help you learn CSS online, whether you’re just getting started with the basics or you want to explore more advanced CSS. Check out Learn CSS: The Complete Guide.