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| Resource | Description | Platform |
|---|---|---|
| A Complete Guide to Grid by CSS-Tricks. | Tutorial | |
| Learn CSS Grid with Wes Bos in 25 pretty good videos. From fundamentals to Real World in about 4 hours. | Video | |
| 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 14 interactive screencasts to take you from beginner to advanced. Sign in with Github. | Screencast | |
| CSS Grid Layout - Rachel Andrew | February 2017 | Video | |
| Rachel Andrew: Start Using CSS Grid Layout Today | Video | |
| Jen Simmons Designing with grid. | Video | |
| CSS-Tricks Screencast #153: Getting Started with CSS Grid. | Video | |
| A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh. | Tutorial | |
| Codeburst: css grid layout simple guide. | Tutorial | |
| 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 |
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| Cheat Sheet | Description |
|---|---|
| Your ultimate CSS grid visual guide. Interactive cheat sheet. | |
| Basics: Below are some examples of CSS Grid usage and commented code snippets, feel free to use your browsers dev tools to inspect the example above each snippet. | |
| CSS Alignment Cheatsheet [Patrick Brosset} | |
| Learn all about the properties available in CSS Grid Layout through simple visual examples. | |
| MDN Web Documents: CSS Grid Layouts | |
| CSS Grid Layout: The Fr Unit. |
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
Islandwebtek
