It is about time to learn CSS Grid if you haven’t already. It is the newest and hottest method for making web design layouts that are both fully responsive and browser-consistent.
While the old box model and the tables are still in use, CSS Grid gives you the means to make standardized layouts, both cross-browser compatible and supported by most major browsers. The general opinion is that CSS Grid will be the standard for web layouts in the future so you shouldn’t miss the opportunity to learn the way it works if you are a web designer or developer.
Learn CSS Grid
This well-organized method for learning the Grid is created by Jonathan Suh and presents the learner with a table of contents, allowing seamless transition from one section to another. It is great for beginners as every example is followed by visual explanation of what it does, resulting in faster learning.
The MDN Documentation
The documentation of Mozilla on the CSS Grid Layout is extensive and thorough but perhaps not as easy to grasp as the guides published on other places, especially if you’re not used to reading documentation. However, once you go through their examples you will notice that many layouts are much easier to create with CSS grid that with other means.
Apart from presenting you with code examples, MDN offers the option to play with them on JSFiddle or CodePen.
Introduction to The Grid by Codecademy
They have a small but effective course on learning CSS Grid. It does require a user to create an account but the process takes little time and as a result, you are presented with an easy to follow learning format. If you are new to web design, you may also take other courses with them before you would want to learn CSS Grid.
The Tuts+ Guide
Tuts+ have extensive and high quality web design and development courses and the one they have on CSS Grid is not an exception. Their guide is built in different sections in which you go from a beginner to an advanced CSS Grid user. The examples are thorough, clear and full of useful practical examples.
Rachel Andrew’s CSS Layout WorkShop
If you don’t mind spending a few bucks learning, the paid courses of Rachel Andrew are also a good way to get into grips with CSS Grid. If you like to learn in a structured way, his program on this grid system may be a great learning opportunity for you.
FreeCodeCamp’s 5 Minutes Course
Although not as extensive and lengthy as the aforementioned courses, the one by FreeCodeCamp presents you with the essentials on learning CSS Grid in just 5 minutes. You may try it if you are short on time.
Grid by Example
They are yet one additional resource for learning The Grid by examining CodePen examples on how the Grid-based layouts will look in supporting browsers. Through visual examples and relevant explanations, you learn techniques relevant to this particular grid layout system.
The Grid Garden Game
Their game is an interactive way of learning the CSS Grid techniques by growing a carrot garden and watering the areas where carrots grow. Going through all the 28 levels of the game is both fun and makes you a more experienced CSS Grid user.
A Complete Guide to Grid
The CSS-Tricks’ Complete Guide to Grid is my personal favorite when it comes not only to learning the grid but also as a reference on how to use some Grid properties. It may as well be all you need to learn CSS Grid. Broken down into easy to follow sections, this guide is fantastic and you should definitely try it.
Udemy’s courses on CSS Grid
Sometimes, learning from web tutorial isn’t an appealing or an interactive experience. Sometimes you wish you had a number of video tutorials to learn from. This is when Udemy’s courses on CSS Grid come in handy. I bought a number of them in the past since they come both at high quality and great price. Just look for those courses labeled as best sellers.
Their learning system is also quite advanced and very interactive, allowing you to ask and answer questions related to the course you enroll in. What is even better, you not only learn how to use CSS Grid but you also build new projects with it – projects you can use later in your portfolio.
CSS Grid is an entirely new world when it comes to making layouts with CSS. If you haven’t tried it yet, then perhaps now is the time. If you are part of the web design and development community, this new technique for building layouts is a necessary addition to everything related you’ve already learned.
