Creating Layouts with CSS Grid
When I first learned how to make web layouts I felt disgusted. Nearly every attempt to create a nice-looking web page with columns and rows required me to contend with floats. Now, there's nothing wrong with floats – if you're using them for their original purpose. Floats were made for the modest purpose of flowing text around objects, but because there was no proper layout tool in the early 2000s we were dependent on abusing them to lay out our web pages.
So when I had the opportunity to make the definitive Pluralsight course to introduce the first proper layout module for CSS, I jumped at the chance. Browser support for CSS Grid has reached ubiquitous levels and the time to learn this technology has come.
Course overview
In the first module, Meet CSS Grid, I introduce CSS Grid and contrast its declarative syntax compared to the hacky float syntax of yesteryear. I also explain how its terminology fits in with the world of larger world of layout design.
In Up and Running with CSS Grid, I bypass most of the available properties to show how complete layouts can be coded as simply as possible. This was my chance to fix what I consider the biggest issue with other resources that teach CSS Grid – the sheer number of properties are overwhelming! I want to get you working in CSS Grid as quickly as possible to appreciate its power and simplicity without the subtleties of different properties getting in the way.
You can think of the process of creating layouts in CSS Grid as being a two-step process:
- Define your grid
- Position items inside your grid
The next two modules, Defining Grids: In-depth and Positioning Items: In-depth go into each step in detail. You'll learn about all the remaining properties, including how they give you neat shorthands and maximum control over every aspect of your layout.
Finally, Advanced CSS Grid dives into the discussion of naming lines and areas, as well as the fun technical details that can really help you feel like you've mastered the tool. Putting the subject of naming into the last module was another important instructional design decision. I felt like introducing naming too early undermined the importance of contending with grid lines. I would rather the learner master this aspect, and then learn how to use named grid areas. This hopefully makes the course feel like concepts are introduced gradually and purposefully, but doesn't affect the overall goal of mastering every aspect of CSS Grid.
Watch the course
The course is exclusively available on Pluralsight. You can watch it with an active subscription, or you can get a free trial which will give you plenty of time to watch the course.
Pluralsight: Creating Layouts with CSS Grid
Testimonials
This is the first time I feel like I actually understand CSS Grid! I have done a few tutorials and researched some syntax, but not until this course have I had a full understanding of the Grid concepts
Fantastic!! Wonderful teacher that delivered the information clearly and concisely. I would definitely take another class with this instructor. Job well done!!
One of the best course I have taken at Pluralsight