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
|Complete Guide To Grid-CSS Tricks||A Complete Guide to Grid by CSS-Tricks.||Tutorial|
|Learn All About CSS Grid||Learn CSS Grid with Wes Bos in 25 pretty good videos.|
From fundamentals to Real World in about 4 hours.
|Grid By Example||This site is a collection of examples, video and other information to help you learn CSS Grid Layout. Developed and maintained by Rachel Andrew.||Tutorial and Videos|
|Learn CSS Grid for Free||Learn CSS Grid for free|
14 interactive screencasts to take you from beginner to advanced. Sign in with Github.
|CSS Grid Layout||CSS Grid Layout - Rachel Andrew | February 2017||Video|
|Start Using CSS Grid Layout Today||Rachel Andrew: Start Using CSS Grid Layout Today||Video|
|Designing with grid||Jen Simmons Designing with grid.||Video|
|Getting Started with CSS Grid||CSS-Tricks Screencast #153: Getting Started with CSS Grid.||Video|
|A comprehensive guide ...CSS Grid Layout||A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.||Tutorial|
|CSS grid layout simple guide||Codeburst: css grid layout simple guide.||Tutorial|
|Learning CSS grid layout with the Swiss||Learning CSS grid layout with the Swiss.|
I wrote this article not like a tutorial with a step-by-step detailed explanation, but it’s rather a diary of my experiments with the Grid layout.
|Experiments with Grid Layout|
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
|CSS Grid Cheat Sheet||Your ultimate CSS grid visual guide. Interactive cheat sheet.|
|CSS Alignment Cheatsheet||CSS Alignment Cheatsheet [Patrick Brosset}|
|GRID||Learn all about the properties available in CSS Grid Layout through simple visual examples.|
|CSS Grid Layout:||MDN Web Documents: CSS Grid Layouts|
|CSS Grid Layout: FR Unit||Fr is a fractional unit and 1fr is for 1 part of the available space.|
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?