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).

Learning Resources
If you haven’t started to learn CSS Grid, here is a short list of free resources to help you learn CSS Grid:

CSS Grid

CSS Grid Learning Free Resources
Updated: 5/4/20
Complete Guide To Grid-CSS TricksA Complete Guide to Grid by CSS-Tricks.Tutorial
Learn All About CSS GridLearn CSS Grid with Wes Bos in 25 pretty good videos.
From fundamentals to Real World in about 4 hours.
Grid By ExampleThis 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 FreeLearn CSS Grid for free
14 interactive screencasts to take you from beginner to advanced. Sign in with Github.
CSS Grid LayoutCSS Grid Layout - Rachel Andrew | February 2017Video
Start Using CSS Grid Layout TodayRachel Andrew: Start Using CSS Grid Layout TodayVideo
Designing with gridJen Simmons Designing with grid.Video
Getting Started with CSS GridCSS-Tricks Screencast #153: Getting Started with CSS Grid.Video
A comprehensive guide ...CSS Grid LayoutA comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.Tutorial
CSS grid layout simple guideCodeburst: css grid layout simple guide.Tutorial
Learning CSS grid layout with the SwissLearning 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

Cheat Sheets
Second, here is a short list of cheat sheets to help you use CSS Grid:

CSS Grid Cheat Sheets

Awesome cheat sheets for CSS Grid users
Updated: 2/22/20
Cheat SheetDescription
CSS Grid Cheat SheetYour ultimate CSS grid visual guide. Interactive cheat sheet.
CSS Alignment CheatsheetCSS Alignment Cheatsheet [Patrick Brosset}
GRIDLearn 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 UnitFr 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?

Gerald Watanabe

Divi WordPress Theme

Share This