I remember in my early years of building websites (2000), I used tables to layout a web page.
Later, I learned to use CSS divs and floats, then came Flexbox, and now Grids. I know what you are thinking, “I just learned flexbox, now I have to learn Grids?”
Welcome to the world of web technology, new stuff keeps coming down the pike. It keeps you on your toes.
CSS Grid is the latest CSS feature available in most browsers today.
You can verify browser compatibility with I Can Use.
So what is so great about CSS Grid?
You can now create two-dimensional layouts and has the ability to align both columns and rows.
Here is a much clearer explanation from CSS-Tricks.
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items).
If you haven’t started to learn CSS Grid, here is a short list of free resources to help you learn CSS Grid:
CSS GridCSS Grid Learning Free Resources
Second, here is a short list of cheat sheets to help you use CSS Grid:
CSS Grid Cheat SheetsAwesome cheat sheets for CSS Grid users
These are the some of the tools I have used to help me get into CSS Grid myself.
How about you, are there any learning resources you would like to share?