CSS Grid

Grid Resource 1: CSS-Tricks

CSS-Tricks' A Complete Guide to CSS Grid is a comprehensive guide on how to use the grid layout. Like the Complete Guide to Flexbox, the guide separates descriptions and explanations of grid properties based on whether they are applied to the parent (grid container) or children (grid items). Each property contains a description about what it does, how it works, and what values to use when implementing it. There are code snippets and visuals included to give the user an example of how using grid will affect their layout. Below the guide to grid properties are sections detailing browser support, grid animations, grid tricks, and links to additional pages and other sources further explaining how to use CSS grid.

Grid Resource 2: Learn CSS Grid

Jonathan Suh's website Learn CSS Grid is a guide to learning and using CSS grid that presents the information in a logical order without explicitly dividing properties based on parents and children. Each section covers a different grid topic (Grid Container, Grid Gaps, Spanning Items, etc.) and details the properties required and how to use them. Visual examples are displayed in each section to demonstrate what design technique the topic is introducing and how they will affect the layout. Below the main content of the page are links to more in-depth guides provided by MDN Docs and W3C, as well as links to grid resources from other developers.

Grid Resource 3: Grid by Example

Rachel Andrew's site Grid by Example contains a collection of videos and interactive examples covering different methods of using grid layout. Under the "Start Here" tab is a collection of links to videos and presentations, articles and blog posts, and example code for each of many basic grid layout topics. The Examples page contains interactive code snippets demonstrating how each grid property/technique works, and many topics have accompanying video tutorials. The Patterns page contains pre-built grid patterns that can be used on your own web page by copying the provided CSS code. Lastly, the Resources page contains articles and videos written by Andrew on different grid topics, as well as links to other websites providing helpful information.

Summary

Just like with CSS Flex, there are a plethora of resources available to help a user learn how to use grid layout to improve their page design. Josh Comeau also wrote An Interactive Guide to CSS Grid that is as comprehensive and helpful as his Flex guide, LearnCSSGrid.com contains links to other guides and courses to learn CSS Grid, and games like Grid Garden, Grid Attack, and Grid Critters serve as interactive guides to learning grid layout in a more fun and hands-on way. CSS-Tricks still provides possibly the most helpful guide if a quick reference is needed, while Learn CSS Grid and Grid by Example provide more in-depth examples and techniques to use grid to its full potential. All the above guides are extremely helpful for beginners or experts to brush up on their grid terminology, properties, values, and effects.