1. Web Design
  2. CSS Grid Layout

New Course: 3 CSS Grid Projects for Web Designers

Scroll to top
Read Time: 2 mins

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.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.