Grid

What is Grid?

Grid, also referred to as CSS Grid, is the newest approach to layouts in CSS.
The key difference with flexbox is that grid is 2-dimensional (both rows and columns), while flexbox is primarily 1-dimensional (either row or column), with flex-wrap allowing for multiple dimensions.
Grid has much greater complexity than flexbox.
Grid and flexbox do have strong similarities in their HTML markup, with a parent element serving as the grid container (displayed as grid or inline-grid) and then the children (not the descendants) are the grid items. This parallels what happens in flexbox with the flex container and flex items.
Also like flexbox, the grid container has certain CSS properties and the grid items have other CSS properties.
There is a lot to grid (entire books have been devoted to it), and there are many ways to accomplish the same result. My advice is to find the grid syntax / approach that makes the most sense to you, and stick with that. You can accomplish 90% of layout setups with 20% of the grid properties. Most of the time, there's no need to get into the really complex implementations.

If you are finding yourself with a lot of nested flex containers, it's probably time to consider grid.
Grid will allow you to achieve greater flexibility and control with less code.
Any time you're going beyond a straightforward setup like 2 x 2, 3 x 3, then consider grid.
Do not use grid as a replacement for table markup when you have tabular data. Use an appropriately marked up table in those cases. Grid can replicate the appearance of a table, but accessibility suffers greatly and that's what is most important. It's a case where just because you can do something, it doesn't mean you should. An accessible data table is the best approach.

The fr sizing unit was added specifically for grid. It is an abbrevation for "fraction".
This sizing unit allows for dynamic and flexible columns without needing to deal with percentages, so it simplifies the CSS.
It is based entirely on the available empty horizontal space in the row and dividing that between the columns.
If you have three columns and you want them to all be 1/3 of the available space, you would specify the columns as being 1fr, which splits them equally (they each get one of the fractions when the space is divided up).
If you wanted one of the columns to occupy twice as much width as the others, it would be 2fr, which means that it gets two times the space of the 1fr columns.
3fr would be three times the width of a 1fr column.
Decimal values are supported, so 1.5fr would be 1.5x the width of a 1fr column.

There are a number of excellent resources to learn the fundamentals of grid.
A Complete Guide to Grid - this covers the grid concepts, the CSS properties, and has some code examples.
Explore Grid by Example - this will provide you with code examples for a variety of different layouts, and you can adjust the examples on CodePen to see the changes in rendering.