When first I started to build the layout of my web pages I was using the Bootstrap grid system without realizing that there is a powerful layout system inside CSS. Styling takes time and not only an hour but probably days and weeks if you are working on a big project and specifically when it is time to work as a freelancer alone. Many frameworks like Bootstrap and libraries have been built to reduce development time and styling time but I think not every time we need to use those frameworks and libraries, an obvious example is CSS GRID LAYOUT SYSTEM. Not only frameworks and libraries get enhanced but languages like HTML, CSS, and JS are getting enhanced.
Many developers at first struggle to find a good place to start learning CSS grid layout, and I think this can be a reason for developers to avoid using the CSS grid and try to use frameworks and libraries. In this ( my first ) writing I tried to look up some great places from the internet to learn and practice CSS grid layout and I found the following 7 places are best, I recommend to anyone to start from first place (basic and simple) and then move on gradually to others in the list
1-Learn CSS GRID for free
This is a free Scrimba course by Per Harald Borgen, he explains CSS grid layout clearly and steps by step guide by you using Scrimba screencasts. There is an available version of this course on YouTube but I recommend to take it on Scrimba website, videos on Scrimba are very short and they are interactive (it means you also can edit and change code while you are learning)
This was the first resource I started with to learn the CSS grid and I feel like I had the right choice. Click here to find it out.
2- CSS grid garden
After you learn CSS grid try to practice using grid garden and have a little fun, Grid Garden is a game to learn and practice CSS grid layout and it is totally free, find it out here
3- A Complete Guide to Grid
A detailed article about the CSS grid and all of its properties on the CSS-Tricks website, here you can find more about CSS grid layout which helps you to understand more.
4- Grid by example
When I was reading the article “Creating dice using CSS grid“ the author has stated Grid by example website, the grid by example is a rich place to learn CSS grid layout, there you can find many examples and patterns you need to master CSS grid display.
5- Bootstrap vs CSS Grid
After you learn the CSS grid take a look at this article. Bootstrap is widely used as a grid system for web development, Sterling Perry explains the difference between CSS Grid Layout system and Bootstrap Grid Layout, here is the link
6- 3 CSS grid techniques to make you a grid convert
There are some properties in the CSS grid display that amaze many developers and make their life easier and maintainable, here is Stephanie Eckles, she shows how big fun she was for flex display and then she changed her work to grid display for reasons. here is the link
7- CSS grid generator by Sarah Drasner
let's not forget the importance of handy tools for the grid layout. Number 7 in the list, a tool for grid layout, Dan Vega explains CSS grid generator in his article, I think it is a super tool when it comes to face difficult layouts in your website, we also can use it to test our layout first and then writing code to build our layout.
Top comments (0)