10 Cool and Free Resources to learn CSS grid quickly in 2021

Hello Developers, If you heard about CSS grid earlier but haven't get chance to learn it or consfused where to start then in this post I am going to help you. I would give you some basic understanding of CSS grid and let you know some cool resources where you can learn in detail very easily.

What is CSS grid

CSS grid is a combination styles which lets you to create complex responsive web design layouts more easily and consistently all across browsers in very less line of codes. Often developers gets confused between CSS grid and flexbox and don't know which one should use. Well if you know the difference it is to choose.

Difference between CSS grid and flexbox

👉 CSS grid is designed for two-dimensional layout - rows and columns at the same time.

👉 CSS flexbox is designed for layout in one dimension - either a row or a column.

Which one you should use?

👉 When you need to control the layout by row and column then grid is useful.

👉 When you need to control the layout by row or column only then flexbox is useful.

I hope you have an good understanding about CSS grid now. So here are following cool and awesome resource which are quite helpful to learn CSS grid:

CSS Grid Layout by MDN

Mozilla Developers Network is a primary resource to learn anything about frontend development. It has bunch of meaningful posts to learn CSS grid. Here you'll learn basic concepts of grid layout with examples and detailed explanations.

A complete CSS Grid guide by CSS-Tricks

There is a complete CSS grid guide published on CSS-Tricks by Chris House. This guide contains everything you want to know from introduction to advance use of CSS grid. The explanations of the topics has broken into small chunks so could understand slowly and easily. Once you learn everything then you may follow this post about CSS grid responsive layout without media queries.

Learn CSS Grid

CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. This guide was created as a resource to help you better understand and learn Grid, and was organized in a way I thought made the most sense when learning it.

Grid Garden

Grid Garden is a game for learning CSS grid layout. This is a great resource where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property. You may follow this github repo of Grid Garden to explore more.

CSS Grid Visual Cheat Sheet by Malven Co

This is a visual cheat sheet for CSS Grid. Simple and easy copy to clipboard functionality lets you copy the grid styles and use it immidiately in your CSS this way you may experiment various features in your own CSS.

CSS Grid Free Video Course by Wes Bos

This free video course sponsored by Mozilla Firefox. In this free video course you'll have an access of 25 videos plus all resource files used in video tutorial. It is about 4 hours long focused on fundamentals to real world usage.

CSS Grid may seem a bit daunting with new syntax and layout ideas, but in this video course you'll see it's fairly simple and can be broken down into a handful of powerful concepts that when used together will blow your mind and change the way you create layouts for the web forever.

Grid by Example

This is an completely open source project by Rachel Andrew. Grid by Example like title tells everything about this project. Here you'll learn CSS Grid by taking the example of every topic you want to learn. This site is a collection of examples, video and other information to help you learn CSS Grid Layout.

MASTER CSS GRID

Video tutorials and resources to help you master CSS Grid Layout. It has free video tutorials covering various topics like Placing items on the grid, Aligning items on the grid, Auto flow columns and rows etc.

Awesome CSS Grid github repo

A manually curated list of CSS Grid resources. This github repo has all useful stuff about CSS grid like Documentation, Articles, Tools and Slides etc.

CSS Grid Layout by W3Schools

W3School has well detailed documentation about CSS grid where you can play with examples.

I hope you have liked this post and if you think this post has helped then let me know your opinion and don't forget to share this post with other developers.

See you in the next blog post and keeping rocking!