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.
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 Envato 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 grid-column and grid-row properties.
Related Links
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.
Related Links
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.
Related Links
You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.
Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.
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.
