CSS Grid is a system that helps to place your layouts in horizontal (rows) and vertical (columns) direction. It is also known as a two-dimensional layout system and helps you to create a responsive layout without any hassle. Below is a video that illustrates how you can achieve a layout using CSS Grid (I found it in MDN Web Docs). This video will give you an idea of what you can achieve with Grid.
Why did I start learning CSS Grid?
Here are some reasons that inspired me to learn CSS Grid:
✨ Popularity:
We all know it’s a popular layout system that is used by many Designers (or some might still be comfortable with Flexbox). In the first place, I also wanted to try it and wanted to explore the possibilities that it holds but I failed. When I first tried to learn it, I didn’t understand a thing and hence quit because it is complicated. But few days back, I again started learning and unlike the first time, I didn’t quit this time and I am glad. Learning CSS Grid has been fruitful for me and I hope this will 🚀kick-start my career.
📱 Handle responsive design:
More than half the population (approx 53%) use their Cell Phones to surf the internet today and the usage of Cell Phones is increasing phenomenally. Being a Web Designer it is crucial to have the skill of creating a responsive design. Further, if the website designed is not responsive then you will lose your customer too because that will lead to a poor experience. So all these motivated me to learn those stuff that will help me in creating responsive designs.
💻Sharpening skill:
Web development is a field of immense possibilities. This can give you a lot of perks and benefits like freedom, financial stability, flexibility in terms of work, freelancing, and so on. But on the other hand, it is a challenging and constantly evolving field too. If you can't go on hand-in-hand with the new languages/skills then you will be left behind. Continuous learning is the key to enhance your skill.
You don’t need to learn all new fancy languages. Learn only those which are necessary.
🌐Resources that I used:
1. Scrimba:
It is an online interactive platform which teaches you how to code. The fun part is it has screencasts which lets you interact with the code directly into the player providing you an enticing experience. It has a great CSS Grid course taught by the co-founder Per Herald Borgen. Highly recommended if you want to start learning Grid.
2. The Net Ninja:
This is a widely popular YouTube channel and has more than one thousand tutorials. It is a great channel and has videos of different languages/ frameworks like JavaScript, PHP, React, Flutter, HTML, and many more. Crystal clear explanation is one of the key features of his tutorials.
3. CSS GRID by Wesbos:
Wesbos is a Full Stack Developer and teacher from Canada. He is popular for his free great tutorials like What The Flexbox, CSS GRID, JavaScript30 which teaches you to build 30 things in 30 days with 30 tutorials. If you want to learn CSS Grid in depth then this tutorial is for you.
4. CSS-Tricks:
If you prefer learning by reading the article then here is an article in great detail by Chris House. What I like from this article is the properties that can be used by parent item and child item has been separated making it easier for us to learn.
5. Grid By Example:
This is a project by Rachel Andrew. It is, without a doubt, a great resource for learning CSS Grid.
6. Thu Nghiem:
Well, Great! You have covered all the basics, you know how Grid works. Now what? Well, I have got you covered. Here, Thu provides you few sets of examples so you could learn and practice. Give it a try. It's worth checking. And one more thing, he is the creator of devchallenges.io where you can get some great challenges for practicing. Highly recommended.
7. Grid garden:
This is a fun game where you can check your CSS Grid knowledge that you have acquired till now. If you are able enough to complete the game, 🎉Congratulations.
🖥Browser support:
According to caniuse.com, CSS Grid supports most of the browser. But be cautious to use the latest version of whatever browser you use otherways you would end up pulling off your hair.
🌝My recommendation:
Being a developer/designer, the common mistake that we commit is we just run after that fancy language or that shiny framework without knowing the basics. The result is we fail, we get overwhelmed by that language/framework and we quit. Thus, what I urge is first learn the basics. For instance, you can learn Flexbox before learning Grid because Flexbox is comparatively easy than Grid. Grid is slightly complex. If you do not understand once, rewatch the tutorial or reread the article but don't quit. You will thank yourself later on.
Thank you for reading. Feel free to add more resources for learning Grid. You can follow me on Twitter.